javascript同页面多次调用弹出层具体实例代码

254 阅读 0 评论 168 点赞

我是靠谱客的博主小巧胡萝卜，最近开发中收集的这篇文章主要介绍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>