Javascript calls the pop-up layer code multiple times on the same page

Source: Internet
Author: User
Tip: you can modify some code before running

<!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>Click the text pop-up layer</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" > <div class="border"> <div class="pop_head"> </div> <div class="pop_body"> <p>1111111111111111111111111</p> <div class="miaosu">Li Hai Mi Lan spring Address: No. 298, Lianfeng Road, Yuelu District (West of Monkey Stone Bridge, opposite to Hunan University of Traditional Chinese Medicine). For details, please call the sales office: 400-7055-111 to 52159</div> <div class="fomdiv">Mobile phone number:<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. There will be a delay when the network is busy. Please do not send it multiple times in a short time<br />2. Each mobile phone number can receive 5 real estate information on the same day</p> </div> </div> </div> <!--弹出层的按钮:--> </div> <div class="popbox"> <div id="pop2" class="pop" > <div class="border"> <div class="pop_head"> </div> <div class="pop_body"> <p>22222222222222222222</p> <div class="miaosu">Li Hai Mi Lan spring Address: No. 298, Lianfeng Road, Yuelu District (West of Monkey Stone Bridge, opposite to Hunan University of Traditional Chinese Medicine). For details, please call the sales office: 400-7055-111 to 52159</div> <div class="fomdiv">Mobile phone number:<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. There will be a delay when the network is busy. Please do not send it multiple times in a short time<br />2. Each mobile phone number can receive 5 real estate information on the same day</p> </div> </div> </div> <!--弹出层的按钮:--> </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>
Tip: you can modify some code before running
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.