标签：
虽然现在开源社区上有各种功能强大的模态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";} |
标签：
原文地址：http://www.cnblogs.com/hyperz/p/4733030.html
