使用bootstrap模态框实现浮动层

时间：2024-11-03 22:34:50
authour： 陈博益
updatetime： 2015-04-22 06:52:15
friendly link： http://v3.bootcss.com/javascript/#modals

目录：

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="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"

             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中的内容。

相关文章