Bootstrap模态框原理分析及问题解决

时间 2019-11-09

原文原文链接

最近自学了bootstrap以为里面模板样式挺好的，就想本身实现实现，很少说了，开始进入正题了css

今天就来实现bootstrap里面的模态框弹出效果html

首先很简单实现一个相似于panel的modaljquery

 1 <body>
 2 <button type="button" class="btn btn-default" style="display: block;margin: 20px auto;">Click me!</button>
 3 <div class="chw-dialog">
 4     <div class="chw-modal">
 5         <div class="chw-title">
 6             <button type="button" class="close">
 7                 <span>&times;</span>
 8             </button>
 9             <h4>chw-Modal title</h4>
10         </div>
11         <div class="chw-content">
12             <p>fantasy baby</p>
13         </div>
14         <div class="chw-footer">
15              <button class="btn btn-info">Save changes</button>
16             <button class="btn btn-default">Close</button>
17         </div>
18     </div>
19 </div>
20 <!-- <script src="js/jquery-1.11.1.js"></script>
21 <script src="js/bootstrap.min.js"></script> -->
22 </body>

而后完成他的csschrome

    .chw-dialog {
        display: none;
        position: fixed;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1100;
        opacity: 0;
        transition : opacity .15s linear;
        }
    .chw-modal{
        width: 600px;
        margin: 30px auto;
        box-shadow: 0 5px 10px rgba(0,0,0,.5);
        border-radius: 6px;
        border: 1px solid rgba(0,0,0,.5);
        z-index: 1200;
        background-color: white;
        transform: translate(0,-25%);
        transition: transform 0.3s ease-out;
        }
    .chw-panel{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1024;
            background-color: black;
            opacity: 0;
            transition : opacity .15s linear;
        }
    .chw-title{
            padding:15px;
            border-bottom: 1px solid #dddddd;
        }
    .chw-title h4{
            line-height: 1.4;
            font-size: 23px;
            margin: 0;
        }
    .chw-content{
            padding:15px;
            border-bottom: 1px solid #dddddd;
        }
    .chw-footer{
            padding: 15px;
            clear: both;
            overflow: hidden;
        }
    .chw-footer button{
            float: right;
            margin-right: 10px;
        }
    </style>

View Code

好了很少说开始重点部分，先看看bootstrap的源代码，点击button后bootstrap

发现有一个后面有一个蒙层看见myModa和其子元素都没有background-color和opacity结合使用的，说明这个蒙层不是myModal生成的，那这个蒙层是怎么生成的？浏览器

我把myModal的类所有删除后（剔除css样式）发现蒙层还在，从而更加确信了个人猜想，而后用chrome去获取蒙层发现这个蒙层在整个html最下面。app

那为何一开始没有索取到这个元素能，由于z-index的效果这个蒙层div(z-index:1040;)在modal类的下面(z-index:1050;)退出后，这个蒙层div就没有了，说明经过js添加dom

好了在清楚大致css结构的时候咱们本身来写一个相似的弹出功能点击按钮，js生成蒙层你的modal 点击周围或者退出按钮时蒙层删除 modal隐藏。ide

 1 <script>
 2     $("body>button").on('click',function () {
 3         var temp = "<div class='chw-panel'></div>"; 4 $("body").append(temp); 5 $(".chw-dialog").css("display","block"); 6 setTimeout(function(){//后续会说明setTimeout 7 $(".chw-panel").css("opacity","0.5"); 8 $(".chw-dialog").css("opacity","1"); 9 $(".chw-modal").css( "transform","translate(0,0)"); 10 },1); 11  }); 12 $('.chw-dialog').on('click',function(){ 13 debugger; 14 $(".chw-panel").css("opacity","0"); 15 $(".chw-dialog").css("opacity","0"); 16 $(".chw-modal").css( "transform","translate(0,-25%)"); 17 setTimeout(function () { 18 $(".chw-dialog").hide(); 19 $(".chw-panel").remove(); 20 },1); 21  }); 22 $(".chw-modal").click(function (e) { 23 e.stopPropagation(); 24 return false; 25 }); 26 $(".close").click(function () { 27 $(".chw-panel").css("opacity","0"); 28 $(".chw-dialog").css("opacity","0"); 29 $(".chw-modal").css( "transform","translate(0,-25%)"); 30 setTimeout(function () { 31 $(".chw-dialog").hide(); 32 $(".chw-panel").remove(); 33 },1); 34 35  }); 36 </script>

首先我是先完成大概功能即点击按钮显示而后退出没有考虑动画，在实现的时候发现了几个问题：函数

1.点击按钮后生成蒙层没有问题，可是点击modal之外部分没有退出，没有任何反应。（这个问题是由于在实现蒙层的点击生成退出的时候发现的，但其实是点击chw-dialog来关闭的由于他的 z-index高于那个蒙层div的z-index）

　解决方法：使用$.on()，jquery版本1.7+

　由于我原来写的函数是$('.chw-panel').click(function(){})不管怎么点击那个蒙层也不会触发函数，查阅资料后发现，咱们在给动态添加的标签绑定事件的时候（给经过append添加过来的标签<span class=”test”></span>）,不能直接写$(‘.test’).click(function(){});是由于jquery他的事件机制是当页面彻底加载成功后，会根据全部目前页面上符合要求的dom添加事件标示，这样当你触发事件的时候，拥有该事件标示的DOM就会给予响应。但append极可能是页面加载完成后，再触发的事件，这样的话，初始化的时候就没有成功加上，因此你不能简单的使用click须要用on，$(“body”).on(‘click’,’.test’,function(){});因为事件的冒泡机制（若是子事件没有完成（没有定义子事件的处理函数）或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象全部同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）举个例子我有个子事件没有被处理，那么他会传递到他的父级看看父级是否能解决，若是不能继续向上级传递直到解决为止）$(“body”).on(‘click’,’.test’,function(){});这个代表是body这个对象绑定事件，若是body的子元素.test的div触发了点击事件，由于.test没有绑定事件（经过append添加的div），那么他要向上传递，当传递到body的时候，body经过jquery知道是哪一个子元素触发了函数，若是这个子元素恰好和本身选择的元素一致的话就执行函数。若是这样写$(“body”).on(‘click’,function(){});代表只要他的子元素触发事件都会执行函数，就像点击了body触发函数同样，然而实际是子元素触发事件传递到body执行函数

2.不管点击哪一个地方都会退出

　　解决方法：使用stopPropagation()

　　若是我没有加红色的那段代码时，发现点击按钮后，不管我点击哪一个地方都会退出，这和咱们的预期不同啊，他应该是点击modal之外的部分退出。怎么会出现这样的状况呢？由于个人.chw-modal是.chw-dialog的子元素，在定义事件触发函数的时候是这样写的$('.chw-dialog').on('click',function(){});因为事件的冒泡机制，不管你点击.chw-dialog的任何子元素，在这些子元素没有绑定函数的前提下，你的子元素都会执行.chw-dialog绑定的函数

在实现弹出退出后，添加延迟来实现动画过分

 1 .chw-dialog {
 2  display: none; 3  position: fixed; 4 top:0; 5 right: 0; 6 bottom: 0; 7 left: 0; 8 z-index: 1100; 9 opacity: 0; 10  transition : opacity .15s linear; 11 } 12 .chw-modal 13 { 14  width: 600px; 15  margin: 30px auto; 16 box-shadow: 0 5px 10px rgba(0,0,0,.5); 17 border-radius: 6px; 18 border: 1px solid rgba(0,0,0,.5); 19 z-index: 1200; 20 background-color: white; 21 transform: translate(0,-25%);//初始div位置 22 transition: transform 0.3s ease-out; 23 } 24 .chw-panel 25 { 26  position: fixed; 27 top: 0; 28 left: 0; 29 right: 0; 30 bottom: 0; 31 z-index: 1024; 32 background-color: black; 33 opacity: 0; 34  transition : opacity .15s linear; 35 }

在初始化位置和定义相应的transition后，接下来就是经过js添加css来触发动画，改变css的时候发现了一个问题，改变css后可是动画没有出现失效了，这是为何呢？通过本身测试

<div class="test" style="width: 200px;height: 200px;opacity: 0.2;transition:opacity 0.5s linear; "></div> $("button").click(function(){$(".test").css("opacity","1");});

发现能够实现动画效果，那为何myModal的动画效果没有出来呢，通过查阅资料发现，若是在css中先执行了让display:none;变成block的操做的时候动画不会出现，缘由是由于在js中语句几乎是同时执行，因此要想他们之间有个先后运行的效果有两种办法

1.使用setTimeout来控制css属性值变化

2.使用animate在回调函数里面设置display(不能和transition同时使用)

解决了以上问题后就能作到相似的弹出效果啦是否是很炫~~~~~上面须要引用bootstrap.css