javascript同頁面多次調(diào)用彈出層具體實(shí)例代碼
更新時(shí)間：2013年08月16日 16:11:46 作者：
一個(gè)在同一個(gè)頁面可多次調(diào)用的javascript彈出層效果，有需要的同學(xué)可以參考一下
復(fù)制代碼 代碼如下:
<!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>點(diǎn)擊文字彈出層</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>
<!--首先設(shè)置一個(gè)層:-->
<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>手機(jī)號(hào)碼：</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.網(wǎng)絡(luò)繁忙時(shí)會(huì)有延遲，請(qǐng)不要在短時(shí)間內(nèi)多次重復(fù)發(fā)送<br />
2.每個(gè)手機(jī)號(hào)碼當(dāng)日可接收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>手機(jī)號(hào)碼：</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.網(wǎng)絡(luò)繁忙時(shí)會(huì)有延遲，請(qǐng)不要在短時(shí)間內(nèi)多次重復(fù)發(fā)送<br />
2.每個(gè)手機(jī)號(hào)碼當(dāng)日可接收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>
相關(guān)文章
JS去除重復(fù)并統(tǒng)計(jì)數(shù)量的實(shí)現(xiàn)方法
js去除重復(fù)并統(tǒng)計(jì)數(shù)量方法，首先點(diǎn)擊按鈕觸發(fā)事件，然后用class選擇器，迭代要獲取的文本（這里最好用text()方法）加入到Array()集合里。具體操作方法，大家通過本文學(xué)習(xí)下吧2016-12-12
JS async 函數(shù)的含義和用法實(shí)例總結(jié)
這篇文章主要介紹了JS async 函數(shù)的含義和用法,結(jié)合實(shí)例形式總結(jié)分析了JS async 函數(shù)的基本功能、含義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)
本篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)，前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定，目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有三種，有興趣的可以了解一下。2017-03-03
原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
昨天群里面的朋友問了個(gè)比較有意思的問題,keydown,keyup,keypress事件的先后順序。2009-02-02
原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效
這篇文章主要介紹了使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效的方法,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄褂胘s獲取偽元素的content實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
細(xì)數(shù)promise與async/await的使用及區(qū)別說明
這篇文章主要介紹了細(xì)數(shù)promise與async/await的使用及區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)切割輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11