使用bootstrap模态框实现浮动层

开发者雨涵技术 2022年11月15日

0 收藏 455 点赞 4,364 浏览 1625 个字

authour：	陈博益
updatetime：	2015-04-22 06:52:15
friendly link：	http://v3.bootcss.com/javascript/

目录：

1，bootstrap模态框的使用示例

2，注意点

1，下面是一个简单的例子说明bootstrap模态框的使用：

 <!DOCTYPE html>　　//modal.html
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
     <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" />
     <script src="js/jquery-1.11.2.min.js"></script>
     <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
 </head>
 <body>     <h2>创建模态框（Modal）</h2>
     <!-- 按钮触发模态框 -->
     <button class="btn btn-primary btn-lg" data-toggle="modal" href="test.html" rel="external nofollow" 
             data-target="#myModal">
         开始演示模态框
     </button>     <!-- 模态框（Modal） -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close"
                             data-dismiss="modal" aria-hidden="true">
                         &times;
                     </button>
                     <h4 class="modal-title" id="myModalLabel">
                         模态框（Modal）标题
                     </h4>
                 </div>
                 <div class="modal-body">
                     在这里添加一些文本
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default"
                             data-dismiss="modal">
                         关闭
                     </button>
                     <button type="button" class="btn btn-primary">
                         提交更改
                     </button>
                 </div>
             </div><!-- /.modal-content -->
         </div><!-- /.modal --> </body>
 </html>

 <!DOCTYPE html>　　　　　　//test.html
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
     <style>
         .test {
             font-size:x-large;
            background-color:yellow         }
     </style>
 </head>
 <body>
     <div class="test">test</div> </body>
 </html>

2，ps:在实际项目中一般点击a标签或者是button触发方法，然后通过发送ajax将内容填充到modal-content中,需要注意的是每次重新填充时，需要清空modal-content中的内容。