javascript - 关于bootstrap框架问题-PHP中文网问答

下面是加入了bootstrap的页面，为什么模态框在shown.bs.modal和hidden.bs.modal下无效果都是先执行alert再弹出模态框？（代码直接复制就可以使用。。。。。。）


<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>第四天</title>
        <meta name = "viewport" content = "width = device-width,initial-scale = 1,user-scalable = 0">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button class = "btn btn-primary" id = "modal" data-toggle = "modal" data-target = "#modaldel">点击</button>
        <p class = "modal" id = "modaldel" tabindex="-1"  aria-hidden="true">
             <p class = "modal-dialog">
                  <p class = "modal-content">
                       <p class = "modal-header">
                            <h1>bootstrap</h1>
                       </p>
                       <p class = "modal-body">
                            <p>dlgjdokgsdjkgfpksdpfkpsdkfp</p>
                            <p>dlgjdokgsdjkgfpksdpfkpsdkfp</p>
                            <p>dlgjdokgsdjkgfpksdpfkpsdkfp</p>
                       </p>
                       <p class = "modal-footer">
                            <h3>END</h3>
                       </p>
                  </p>
             </p>
        </p>


        <script>
         $("#modaldel").on("shown.bs.modal",function(){

              alert("大家好");
        });

        </script>
    </body>
</html>

全部回复(2)

迷茫2017-04-11 10:34:27 2楼

alert会阻塞所有线程，而且alert会被优先执行,不如用console.log()

赞 +0

添加回复

阿神2017-04-11 10:34:27 1楼

冒昧问一句：你写的modal运行的时候，alert不卡么？我运行你的modal浏览器要等好几秒才能alert（不是我电脑的问题，你给的示例是没问题的）。

我觉得你的jQ写的有些问题，你把示例的script带入到你的modal中你会发现我开始说的问题。。。

jQ必须加上$(document).ready(function(){ //code })！
为什么：你运行的在jQ的环境中，能够使你写的$(...)被jQ识别。而且HTML是从上往下加载的，当碰到$(document).ready时就意味着是个方法，会等待调用（类似于js的function）；而没碰到$(document).ready将会运行。

个人理解，题主可随意。