首页 > 代码库 > BootStrap——模态框

BootStrap——模态框

模态框(Modal)是BootStrap中很棒的一个插件。可以去BootStrap菜鸟驿站里面看看。

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

这里记录的是自己手动调用模态框而不会使用自动的,自己手动的可以做很多的处理,如:添加数据,修改数据,显示数据等等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 模态框(Modal)插件</title>
    <link rel="stylesheet" href=http://www.mamicode.com/"https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  //样式必须有,可以在这个地址下载
    <script src=http://www.mamicode.com/"https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>                 //Jquery库,建议高一点
    <script src=http://www.mamicode.com/"https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>        //bootstrap库
</head>
<body>

<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button id="view">自己手动调用莫态</button> //自己手动调用 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> //属性data-toggle和data-target就是触发模态框的属性 开始演示模态框 </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" id="hh"> 在这里添加一些文本 (这里就是我们可以做处理的位子) </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 --> </div> </body> </html>

//自己手动调用 注意两个事件 模态框显示之前,隐藏时发生 这两个事件
//主要逻辑: 模态框在显示之前把需要操作的类容加载到模态框中, 隐藏时清空模态框

<script>

  $(function(){

          $("#myModal").modal({ backdrop: "static", keyboard: false });
          $("#myModal").modal("hide"); //这个需要最后写
          $("#myModal").on("hidden.bs.modal", function () {
           $(this).removeData("modal"); //清除数据 当模态框对用户隐藏时发生

         $("#view").click(function(){

               $("#myModal1").modal("show");  //显示模态框

         });

        //模态框显示之前需要做什么在里面写就行

        $("#myModal").on("show.bs.modal", function () {

                 //例如:异步去加载需要修改的信息

                $.ajax({

          type: "get",
          url: "@Url.Action("EditProductType")",
          data: { id: EditTypeID },
          success: function (data) {
            $("#hh").html(data);
          },

                 error:function(){

                    alert("失败了");

                  }
               });

            });

 


        });




})
</script>


 

BootStrap——模态框