结合模态框，你也可以给body内容增加其它功能，比如嵌入表单的输入框等，这里不再贴码。
模态框的事件，在javascript中添加下面的代码即可，如下所示：
复制代码 代码如下:
<script src=""></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript"> $("#mymodal").modal("show"); ---调用这句代码才能使插件模态框生效显示出来 $('#myModal').on('hidden.bs.modal', function (e) {
alert("111");
}) ---这个事件指当关闭模态框之后，alert事件将会被触发 </script>
我们来看看模态框如何嵌入视屏，自己需要添加一些代码，自动播放，停止等功能。先来看看代码
<a href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="http://v.youku.com/v_show/id_XMTU2ODMyMDUyMA==.html" >VIDEO</a> <div tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <div> <iframe src=""></iframe> </div> </div> </div> </div> </div> <!-- <script src="https://www.jb51.net/js/jquery-1.11.3.min.js"></script> 本地的加载文件--> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript"> //视屏函数 function autoPlayModal(){ var trigger = $("body").find('[data-toggle="modal"]'); trigger.click(function() { var theModal = $(this).data( "target" ); var videoSRC = $(this).attr( "data-theVideo" ); var videoSRCauto = videoSRC+"?autoplay=1" ; $(theModal+' iframe').attr('src', videoSRCauto); $(theModal+' button.close').click(function () { $(theModal+' iframe').attr('src', videoSRC); }); }); } //调用该函数 $(document).ready(function(){ autoPlayModal(); }); </script> <noscript>不支持javascript浏览器</noscript>
效果不再截图，上面的src引入的是优酷的地址。
四、滚动监听组件
以导航条举列，即根据滚动的位置来自动切换标签页。我们来看下代码。
1：保证出现滚动条。
2：通常给body加data-spy，即使用data-spy="scroll" <body data-spy="scroll" data-target=".navbar" data-offset="70"> <div> <nav role="navigation"> <div> <div> <ul> <li><a href="#home">home</a></li> <li><a href="#message">message</a></li> <li><a href="#about">about</a></li> <li> <a href="#" data-toggle="dropdown">下拉菜单<b></b></a> <ul> <li><a href="#one">one</a> <li><a href="#two">two</a> <li><a href="#three">three</a> </ul> </li> </ul> </div> </div> </nav> <!-- 展示的内容 --> <h1>home</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <hr> <h1>message</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <hr> <h1>about</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <hr> <h1>one</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <h1>two</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <h1>three</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> </div> <!-- 理解data-offset的意思 -->
理解data-offset的意思：即当滚动位置时，距离顶部的偏移量。其次它的事件处理，与模态框的用法类似，不再讲解。
效果如下：
