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

最近自学了bootstrap觉得里面模板样式挺好的，就想自己实现实现，不多说了，开始进入正题了

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

首先很简单实现一个类似于panel的modal

 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>

然后完成他的css

    .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>

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

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

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

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

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

 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

Bootstrap模态框原理分析及问题解决的更多相关文章

页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理
实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...
Bootstrap, 模态框实现值传递,自动勾选
目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递场景: 有一个这样的需求, 在父页面有一个table, ...
js控制Bootstrap 模态框（Modal）插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
Bootstrap模态框按钮
1.触发模态框弹窗的代码这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2>  <but ...
解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
Bootstrap 模态框（Modal）插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件模态框(Modal)是覆 ...
Bootstrap 模态框在用户点击背景空白处时会自动关闭
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
Bootstrap模态框（MVC）
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
去除bootstrap模态框半透明阴影
当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

随机推荐

ARMv8学习 —— SP_EL0和SP_ELx
在AArch64状态下,SP对应的物理寄存器有如下四个(某一时刻只能对应下面其中一个): SP_EL0和SP_EL1 SP_EL2 SP_EL3 如何使用呢? 1.如果程序运行在EL0,那么使用的是S ...
Docker容器内部端口映射到外部宿主机端口的方法小结
转自:https://www.cnblogs.com/kevingrace/p/9453987.html Docker允许通过外部访问容器或者容器之间互联的方式来提供网络服务.容器启动之后,容器中可以 ...
Java通过SMS短信平台实现发短信功能
在项目中使用过发短信的功能,但那个由于公司内部的限制很麻烦,今天在网上找到一个简单的,闲来无事就把它记录如下: 本程序是通过使用中国网建提供的SMS短信平台实现的(该平台目前为注册用户提供5条免费短信 ...
理解Docker镜像分层
关于base镜像 base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 所以,能称作 base 镜像的通常都是各种 Linux 发行版的 Docker ...
在netty3.x中存在两种线程：boss线程和worker线程。
在netty 3.x 中存在两种线程:boss线程和worker线程.
kuda 了解片
本来上个月想去了解一下kuda的,结果一直没有抽出时间去搞,现在大致先开个头,方便后面深入! Apache Kudu是开源Apache Hadoop生态系统的新成员,它完善了Hadoop的存储层,可以 ...
（原）caffe中的conv
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/10486686.html conv总体调用流程如下图所示: 说明:带o的为输出,如Wo代表输出宽度:带 ...
一目了然了解JAVA集合体系
在编程中,常常需要集中存放多个数据.从传统意义上讲,数组是我们的一个很好的选择,前提是我们事先已经明确知道我们将要保存的对象的数量.一旦在数组初始化时指定了这个数组长度,这个数组长度就是不可变的,如果 ...
What’s new for Spark SQL in Apache Spark 1.3（中英双语）
文章标题 What’s new for Spark SQL in Apache Spark 1.3 作者介绍 Michael Armbrust 文章正文 The Apache Spark 1.3 re ...
Android 源码学习
工具篇:如何使用 Visual Studio Code 阅读 Android 源码:https://jekton.github.io/2018/05/11/how-to-read-android-so ...

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

Bootstrap模态框原理分析及问题解决的更多相关文章

随机推荐

热门专题