Bootstrap modal не отображается при вызове

Итак, на одной из страниц у меня есть: (Первая страница)

if (isset($_SESSION['isSuspend'])){
    echo '<script>$("#SuspendModal").modal("show");</script>';
    unset($_SESSION['isSuspend']);
}

На той же странице у меня есть модальный:

<div class="modal" tabindex="-1" role="dialog" id="SuspendModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Suspension System</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><?php echo $_SESSION['isSuspend']; ?></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
            </div>
        </div>
    </div>
</div>

и на другой странице: (Вторая страница)

if ($conn->query($sql) === TRUE){
        $_SESSION['isSuspend'] = "You have suspended ".$user_id."!";
        header("Location: ../admin/edit.php?user=$user_id");
    } else {
        echo "DEBUG: Error: ".$sql."<br>".$conn->error;
    }

Моя проблема заключается в том, что на первой странице, когда я нажимаю кнопку suspend, она будет перенаправляться на suspend.jQuery, которая является второй страницей, если ей удастся добавить ее в базу данных, она установит сеанс var в указанную строку. Но когда он возвращается к первой странице, мода bootstrap не открывается, несмотря на то, что она вызывается. Что я делаю не так?

javascript,php,jquery,html,

1

Ответов: 3

3 принят

Вы можете это сделать <div class="modal" tabindex="-1" role="dialog" id="SuspendModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Suspension System</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>asd</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button> </div> </div> </div> </div> .

HTML

<script>
    $(document).ready(function(){
        $("#SuspendModal").modal();
    });
</script>

JQuery

<?php if($_SESSION['something'] == 'something'): ?> // You can also do it on $_POST / $_GET / $array / $string etc.
<script>
    $(document).ready(function(){
        $("#SuspendModal").modal();
    });
</script>
<?php endif; ?>

Код, указанный выше, откроет ваш модальный файл после загрузки страницы.

Вы можете сделать пару проверок, чтобы добавить требования о том, когда открыть модальный:

пример

PHP

Дополнительная заметка

Лично я предпочитаю останавливаться PHPвместо этого, чтобы повторить ваш скрипт и контент.

Поэтому вместо:

if (isset($_SESSION['isSuspend'])){
    echo '<script>$("#SuspendModal").modal("show");</script>';
    unset($_SESSION['isSuspend']);
}

Я бы сделал это:

<?php if (isset($_SESSION['isSuspend'])): ?>
    <script>
        $("#SuspendModal").modal("show");
    </script>
    <?php unset($_SESSION['isSuspend']);
endif; ?>

Потому что для меня гораздо легче читать код и в конечном итоге отлаживать / улучшать мои скрипты. (ATLEAST в PHPStorm)

Дополнительная заметка 2

Еще одна вещь, которую вы, возможно, захотите узнать для своего модального:

  • Что такое CSS в бутстрапе для

Возможно, некоторые tabindex="-1"настройки не обрабатываются правильно. Мне (наконец) удалось исправить это, удалив tabindex="-1". Просто небольшое примечание :-).

Документация :

  • https://getbootstrap.com/docs/3.3/javascript/#modals <- Bootstrap v3
  • https://getbootstrap.com/docs/4.0/components/modal/ <- Bootstrap v4
  • https://www.w3schools.com/bootstrap/bootstrap_modal.asp
  • https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
1

Я думаю, что проблема вашего скрипта заключается в том, что он не вызывается при загрузке. Чтобы выполнить сценарий при загрузке, вам нужно сделать это

if (isset($_SESSION['isSuspend'])){
    echo '<script>$(window).on("load",function(){ $("#SuspendModal").modal("show"); }</script>';
    unset($_SESSION['isSuspend']);
}

Таким образом, мода модального скрипта будет выполнена после загрузки страницы.

1

Возможно, вы пишете этот php-код в начале страницы

if (isset($_SESSION['isSuspend'])){
   echo '<script>$("#SuspendModal").modal("show");</script>';
   unset($_SESSION['isSuspend']);
}

В этот раз DOM не будет загружаться полностью, поэтому лучше писать этот код в скрипте как

<script>
    $(document).ready(function(){
        var session='<?php echo $_SESSION['isSuspend']; ?>'
        if(session){
            $("#SuspendModal").modal("show");
        }
    });
</script>
JavaScript, PHP, JQuery, HTML,
Похожие вопросы
Яндекс.Метрика