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，这是第二页，如果成功将其添加到数据库中，则会将会话var设置为所述字符串。 但是，当它返回到第一页时，尽管被调用，引导模式也不会打开。 我究竟做错了什么？

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中的ATLEAST）

---

附加说明2

您可能还想了解模态的另一件事是：

• 引导程序中的tabindex =“-1”是什么

可能发生某些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

Answer 2

我认为您的脚本的问题是在加载时不会被调用要在加载时执行脚本，您需要执行此操作

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

这样，将在页面加载后执行show modal脚本。

Answer 3

可能是您在页面开始时编写了此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>