bootstrap之模态框

虽然现在开源社区上有各种功能强大的模态JS框库或JS插件，但大都需要依赖jQuery, 对于使用Zepto的移动端来说不太适合，而且很多功能都不需要。其实要实现一个简单的模态对话框，只需几行HTML+css+js代码就能搞定。 

首先在html上定义两个div元素，其中外层div表示模态框外面的覆盖层(overlay layer), 内层的div表示模态框

?

1 2 3 4 5 6

<div id="modal-overlay">      <div class="modal-data">             <p>一个很简单的模态对话框 </p>         <p>点击<a onclick="overlay()" href="">这里</a>关闭</p>     </div> </div>

 

接着分别为两个div定义样式： 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* 定义模态对话框外面的覆盖层样式 */         #modal-overlay {              visibility: hidden;                  position: absolute;   /* 使用绝对定位或固定定位  */              left: 0px;                  top: 0px;              width:100%;              height:100%;              text-align:center;              z-index: 1000;              background-color: #333;               opacity: 0.5;   /* 背景半透明 */         }         /* 模态框样式 */         .modal-data{              width:300px;              margin: 100px auto;              background-color: #fff;              border:1px solid #000;              padding:15px;              text-align:center;         }

 

最后添加一个控制模态框显示与隐藏的函数

?

1 2 3 4

function overlay(){     var e1 = document.getElementById('modal-overlay');               e1.style.visibility =  (e1.style.visibility == "visible"  ) ? "hidden" : "visible"; }