模态框

² 模态框(模态框（Modal）是覆盖在父窗体上的子窗体)

 

<!-- 按钮触发模态框 -->

//data-toggle="modal"说明你要使用模态框

//data-target="#myModal"或 href="#myModal" 指明模态框的id

<button data-toggle="modal" data-target="#myModal">开始演示模态框

</button>

 

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 

   aria-labelledby="myModalLabel" >

//class="modal-dialog"指明模态框出现的时候的特效,根据我的测试不能放在最外层,因为最外层还包括了背景阴影部分

   <div class="modal-dialog modal-content">   

//class="modal-content" 就是模态框的白色背景  ,没有的话样式会没有背景,她也包围了模态框的内容(头,内容,底部)

//class="modal-header"头部样式

         <div class="modal-header">

//data-dismiss="modal"有了这个能在点击它的时候关掉模态框,class="close" 和 ×就是

            <button type="button" class="close" data-dismiss="modal" >

                  ×

            </button>

            模态框（Modal）标题

         </div>

//class="modal-body"内容部分的样式

         <div class="modal-body">

            在这里添加一些文本

         </div>

//class="modal-footer",底部的样式

         <div class="modal-footer">

            <button type="button" data-dismiss="modal">

关闭

            </button>

         </div>

</div><!-- /.modal -->

</div>

描述部分是我自己测试和通过自己的话来描述的

选项名称	类型/默认值	描述
backdrop	boolean 或 string 'static' 默认值：true	要不要模态框的阴影背景,当时false的时候点击其他部分模态框不会消失
keyboard	boolean 默认值：true	当按下 esc 键时关闭模态框，设置为 false 时则按键无效。
show	boolean 默认值：true	true的时候页面一打开就显示模态框 false的时候不会
remote	path 默认值：false	为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。相当于下面a标签的跳转：  <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

<script>

   $(function () { $('#myModal').modal({

      keyboard: true,

  backdrop:true,

   show:false,

   remote:'remote.html',//当点击模态框显示按钮的时候回显示这个页面

   })});

</script>

 

 

 

 

 

 

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。(打开模态框的时候调用)	$('#identifier').on('show.bs.modal', function () {  // 执行一些动作...})
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () {  // 执行一些动作...})
hide.bs.modal	当调用 hide 实例方法时触发。(影藏模态框的时候调用)	$('#identifier').on('hide.bs.modal', function () {  // 执行一些动作...})
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () {  // 执行一些动作...})

<script>

   $(function () { 

   $('#myModal').on('hide.bs.modal', function () {

       alert('嘿，我听说您喜欢模态框...');

   })

   });

</script>