javascript同页面多次调用弹出层具体实例代码
更新时间：2013年08月16日 16:11:46 作者：
一个在同一个页面可多次调用的javascript弹出层效果，有需要的同学可以参考一下
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击文字弹出层</title>
<style type="text/css">
<!--
*{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px}
p{margin:0px; padding:0px;}
a{color:#039}
a:hover{color:#f60}
.pop{position:absolute;left:40px;top:20px;width:380px;height:240px;background:#fff;border:8px solid #DDD;}
.pop_head{position:relative; height:18px;}
.pop_head img{ border:none; margin:8px 0px 0 0;}
.pop_head a{position:absolute;right:8px;line-height:20px;color:#000;text-decoration:none}
.pop_head a:hover{color:#f60;text-decoration:none}
.pop_body{padding:0 12px 2px}
.popdiv{display:block; width:12px; height:20px;}
.popdiv img{ border:none;}
.popbox{ position:relative; height:360px; width:680px;}
.border{ border:solid 1px #8e8e8e;height:240px}
.miaosu{ line-height:16px; background:#fff6ea; border:solid 1px #ffecd5; padding:4px 8px; color:#666; margin-top:5px;}
.fomdiv{ margin-top:12px; }
.fomdiv span{ display:block; float:left;line-height:32px;font-size:14px; color:#444;}
.tcinp{ width:160px; height:26px; border: solid 1px #DDD; font-size:14px; padding-left:5px; line-height:26px;}
.pop_but{ background: url(images/tbg.jpg) no-repeat; width:69px; height:29px; border: none; color:#fff; text-align:center; line-height:29px; cursor:pointer}
.popbutdiv{ margin:8px 0 16px 74px;}
.pop_p{ line-height:16px; color:#888; padding-top:5px; border-top:dashed 1px #CCC;}
-->
</style>
</head>
<body>
<!--首先设置一个层:-->
<div class="popbox">
<div id="pop" class="pop" style="display: none">
<div class="border">
<div class="pop_head">
<a href="javascript:void(0);" onclick="hide()">
<img src="images/gb.jpg" width="11" height="10" /></a></div>
<div class="pop_body">
<p>
1111111111111111111111111</p>
<div class="miaosu">
222222222222222222222222222222222222222222222222222
</div>
<div class="fomdiv">
<span>手机号码：</span><input name="" class="tcinp" type="text" /></div>
<div class="popbutdiv">
<input name="button" type="submit" class="pop_but" id="button" value="提交" /></div>
<p class="pop_p">
1.网络繁忙时会有延迟，请不要在短时间内多次重复发送<br />
2.每个手机号码当日可接收5条楼盘信息
</p>
</div>
</div>
</div>
<!--弹出层的按钮:-->
<a href="javascript:void(0);" onclick="show();" class="popdiv">
<img src="images/phone.gif" width="12" height="19" /></a>
</div>
<div class="popbox">
<div id="pop2" class="pop" style="display: none">
<div class="border">
<div class="pop_head">
<a href="javascript:void(0);" onclick="hide2()">
<img src="images/gb.jpg" width="11" height="10" /></a></div>
<div class="pop_body">
<p>
333333333333333333333333333333</p>
<div class="miaosu">
444444444444444444444444444444
</div>
<div class="fomdiv">
<span>手机号码：</span><input name="" class="tcinp" type="text" /></div>
<div class="popbutdiv">
<input name="button" type="submit" class="pop_but" id="button" value="提交" /></div>
<p class="pop_p">
1.网络繁忙时会有延迟，请不要在短时间内多次重复发送<br />
2.每个手机号码当日可接收5条楼盘信息
</p>
</div>
</div>
</div>
<!--弹出层的按钮:-->
<a href="javascript:void(0);" onclick="show2();" class="popdiv">
<img src="images/phone.gif" width="12" height="19" /></a>
</div>
<script type="text/javascript">
var EX = {
addEvent: function (k, v) {
var me = this;
if (me.addEventListener)
me.addEventListener(k, v, false);
else if (me.attachEvent)
me.attachEvent("on" + k, v);
else
me["on" + k] = v;
},
removeEvent: function (k, v) {
var me = this;
if (me.removeEventListener)
me.removeEventListener(k, v, false);
else if (me.detachEvent)
me.detachEvent("on" + k, v);
else
me["on" + k] = null;
},
stop: function (evt) {
evt = evt || window.event;
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
};
document.getElementById('pop').onclick = EX.stop;
var url = '#';
function show() {
var o = document.getElementById('pop');
o.style.display = "";
setTimeout(function () { EX.addEvent.call(document, 'click', hide); });
}
function hide() {
var o = document.getElementById('pop');
o.style.display = "none";
EX.removeEvent.call(document, 'click', hide);
}
function show2() {
var o = document.getElementById('pop2');
o.style.display = "";
setTimeout(function () { EX.addEvent.call(document, 'click', hide2); });
}
function hide2() {
var o = document.getElementById('pop2');
o.style.display = "none";
EX.removeEvent.call(document, 'click', hide2);
}
</script>
</body>
</html>
</td>
</tr>
</table>
相关文章
js去除重复并统计数量方法，首先点击按钮触发事件，然后用class选择器，迭代要获取的文本（这里最好用text()方法）加入到Array()集合里。具体操作方法，大家通过本文学习下吧2016-12-12
这篇文章主要介绍了JS async 函数的含义和用法,结合实例形式总结分析了JS async 函数的基本功能、含义、使用方法及操作注意事项,需要的朋友可以参考下2020-04-04
本篇文章主要介绍了javascript实现数据双向绑定的三种方式小结，前端的视图层和数据层有时需要实现双向绑定，目前实现数据双向绑定主要有三种，有兴趣的可以了解一下。2017-03-03
这篇文章主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
昨天群里面的朋友问了个比较有意思的问题,keydown,keyup,keypress事件的先后顺序。2009-02-02
本文主要介绍了原生Js Canvas去除视频绿幕背景的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-09-09
这篇文章主要介绍了使用mouse事件实现简单的鼠标经过特效的方法,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇使用js获取伪元素的content实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了细数promise与async/await的使用及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了javascript实现切割轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论