BootStrap-CSS样式_插件_模态框插件

模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
提示：如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法
您可以切换模态框（Modal）插件的隐藏内容：
1. 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。

2.通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

$('#identifier').modal(options)

选项
有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

下面是一些可JS与 modal() 一起使用的有用的方法

代码实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>模态框</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 
    data-toggle属性：标记modal,点击切换到模态框(modal)
    data-target属性：定位切换的模态框，目标为id="myModal"
    data-dismiss属性：关闭模态框
    data-backdrop属性：true点击模态框外部自动关闭，false点击模态框外部必须有data-dismiss属性才能关闭
    -->
    <h3>按钮触发模态框</h3>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">静态调用模态框</button>
    <button type="button"  id="myButton" class="btn btn-primary btn-lg" >动态JS调用模态框</button>

     <!-- 超链接触发模态框 
    href属性：锚点定位模态框#myModal
    data-remote属性：依赖注入，内部填写HTML界面，模态框modal-content显示指定界面
    -->
    <h3>超链接触发模态框</h3>
     <a type="button" class="btn btn-primary btn-lg"  data-toggle="modal" href="#mylinkModal" data-remote="test.html" >超链接远程加载调模态框modal-content内容</a>
     <a type="button"  id="mylink" class="btn btn-primary btn-lg" >超链接动态远程加载JS调用模态框modal-content内容</a>

    <!-- 模态框（Modal） 
    .modal:
    .fade:过渡插件的淡出效果
    #myModal:定位标记
    .modal-header：设置头部块
    .modal-body：设置内容块
    .modal-footer：设置尾部块
    .modal-title：设置标题，一般使用在<h*>标签中
    data-dismiss="modal"：关闭模态框
    -->
    <div class="modal  fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">模态框标题</h4>
                </div>
                <div class="modal-body">
                    如果您仔细查看上面的代码，您会发现在标签中，是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                    <button type="button" class="btn btn-primary">提交</button>
                </div>

            </div>
        </div>
    </div>
    <div class="modal  fade" id="mylinkModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <h3>模态框插件页面</h3>
                    <!-- <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title">模态框标题</h4>
                    </div>
                    <div class="modal-body">
                        如果您仔细查看上面的代码，您会发现在标签中，是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                        <button type="button" class="btn btn-primary">提交</button>
                    </div> -->
                </div>
            </div>
        </div>
<script>
   $(function(){
       //按钮调用模态框JS
       $("#myButton").click(function(){
           $("#myModal").modal({backdrop:false,keyboard:false});
       });
       //链接调用模态框JS
       $("#mylink").click(function(){
           $("#mylinkModal").modal({backdrop:true,keyboard:false,remote:"test.html"});
       });
       //关闭模态框JS
       $("#btnClose").click(
          function(){
               $("#myModal").modal("hide");
          }
       );
       //模态框显示之前执行的JS事件
       $("#myModal").on("show.bs.modal",
          function(){
              console.log("show.bs.modal")
           }
       );
       //模态框显示之后执行的JS事件
       $("#myModal").on("shown.bs.modal",
          function(){
              console.log("shown.bs.modal")
           }
       );
        //模态框隐藏之前执行的JS事件
        $("#myModal").on("hide.bs.modal",
          function(){
              console.log("hide.bs.modal")
           }
       );
        //模态框隐藏之后执行的JS事件
        $("#myModal").on("hidden.bs.modal",
          function(){
              console.log("hidden.bs.modal")
           }
       );
   })    
</script>
</body>
</html>

依赖注入：超链接(<a>)data-remote属性远程调用test.html代码
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">&times;</button>
        <h4 class="modal-title">test页面模态框标题</h4>
    </div>
    <div class="modal-body">
        <h5>这是test页面内容</h5>
        如果您仔细查看上面的代码，您会发现在标签中，是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
    </div>

button调用效果：

超链接<a>调用效果：