javascript同页面多次调用弹出层具体实例代码
时间:2024-04-10 14:02:31
<!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>
标签:javascript,页面,弹出层
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python协程的四种实现方式总结
2022-12-23 04:41:59
![](https://img.aspxhome.com/file/2023/0/120900_0s.png)
MySql数据库中Select用法小结
2024-01-22 08:45:42
Golang切片Slice功能操作详情
2024-04-29 13:06:54
![](https://img.aspxhome.com/file/2023/4/133914_0s.png)
Python格式化输出字符串的五种方法总结
2023-03-30 02:07:42
![](https://img.aspxhome.com/file/2023/4/86344_0s.jpg)
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2024-04-30 10:47:22
python中input()与raw_input()的区别分析
2023-02-12 14:08:36
![](https://img.aspxhome.com/file/2023/4/94024_0s.png)
Django 用户认证组件使用详解
2021-05-11 12:44:25
怎样开启phpStudy服务器
2023-05-25 00:38:06
如何使用python中的networkx来生成一个图
2022-08-13 05:13:32
![](https://img.aspxhome.com/file/2023/3/101663_0s.png)
Dreamweaver使用疑难解答
2009-09-13 18:41:00
![](https://img.aspxhome.com/file/UploadPic/20072/200723113116214s.jpg)
python起点网月票榜字体反爬案例
2021-03-11 02:56:05
![](https://img.aspxhome.com/file/2023/1/93441_0s.jpg)
pandas修改DataFrame列名的方法
2021-07-18 16:41:24
Asp+ajax打造无刷新新闻评论系统
2008-02-12 15:43:00
![](https://img.aspxhome.com/file/UploadPic/up/2008021216135462.gif)
如何使用python批量修改文本文件编码格式
2021-02-15 14:01:30
Python实现将MongoDB中的数据导入到MySQL
2024-01-21 04:41:01
详解python中GPU版本的opencv常用方法介绍
2023-09-19 22:55:17
![](https://img.aspxhome.com/file/2023/5/82555_0s.jpg)
Go html/template 模板的使用实例详解
2024-04-26 17:17:00
python 实时遍历日志文件
2021-03-30 09:26:20
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2022-12-16 03:43:37
![](https://img.aspxhome.com/file/2023/3/117413_0s.png)
使用pt-kill根据一定的规则来kill连接的方法
2024-01-26 01:18:37