javascript - Bootstrap 模态在调用时不显示

Question

所以在其中一个页面上，我有:(第一页)

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.php，如果它成功地将它添加到数据库中，它将 session 变量设置为所述字符串。但是当它返回到第一页时，尽管调用了 Bootstrap 模式，但它并没有打开。我做错了什么？

Answer 1

您可以使用 jQuery 来做到这一点。

HTML

<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>

jQuery

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

上面的代码将在页面加载后打开您的模式。

你可以做一些检查来添加关于何时打开模式的要求:

示例

<?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 而不是回显您的脚本和内容。

所以代替:

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; ?>

因为对我来说，阅读代码并最终调试/改进我的脚本要容易得多。 (至少在 PHPStorm 中)

---

附加说明2

关于模态，您可能想知道的另一件事是:

• What's the tabindex="-1" in bootstrap for

可能会发生某些 CSS 设置未被正确解析的情况。我(最终)通过删除 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