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

BootStrap——模态框

2024-08-28 09:29:49   221人阅读

模态框（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——模态框


联系
我们