用于自动加载模式的 Javascript 代码不起作用

Question

我使用了一些我在互联网上找到的代码，这些代码应该可以自动加载模态，但它不起作用。 这是一个实时网站，我应该对其进行一些更改。不确定这里出了什么问题:

if (isset($_SESSION['verify'])) {

    echo '
        <script type="text/javascript">
            $(document).ready(function()
            {
                $("#exampleModal").modal('show');
            }
            );
        </script>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modaltitle</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form action="#" method="post">
                            <input type="text" name="otp" placeholder="Type OTP">
                            <textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
                            <center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>';
}

我希望它产生一个模式而无需按下按钮，但在自动加载时它并没有这样做。

Answer 1

    if(isset($_SESSION['verify'])){

    echo"
        <div class='modal fade id='exampleModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
            <div class='modal-dialog' role='document'>
                 <div class='modal-content'>
                      <div class='modal-header'>
                         <h5 class='modal-title' id='exampleModalLabel'>Modaltitle</h5>
                         <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                             <span aria-hidden='true'>&times;</span>
                         </button>
                      </div>
                      <div class='modal-body'>
                         <form action='#' method='post'>
                              <input type='text' name='otp' placeholder='Type OTP'>
                              <textarea rows='1' cols='25' name='message' placeholder='Type Message'></textarea>
                              <center><button id='button2' type='submit' name='verify_otp'>Send Message</button></center>
                         </form>
                     </div>
                     <div class='modal-footer'>
                       <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
                       <button type='button' class='btn btn-primary'>Save changes</button>
                     </div>
                 </div>
             </div>
         </div>
         <script type='text/javascript'>
           $(document).ready(function()
           {
              $('#exampleModal').modal('show');
           });
        </script>";}

我已经通过更改引号(单引号到双引号)修改了您的代码。此代码应该适合您。运行前请检查以下步骤:

1. 您的代码中是否存在任何 JQuery 冲突？
2. 使用浏览器控制台检查是否有任何javascript错误。

我假设您已经包含使用模态所需的 JS 和 CSS。