位置：首页>> 网络编程>> JavaScript>> javascript同页面多次调用弹出层具体实例代码

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

　　发布时间：2024-04-10 14:02:31　

标签：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">


</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同页面多次调用弹出层具体实例代码

猜你喜欢