javascript同頁面多次調用彈出層具體實例代碼

2024-05-06 15:50:39

字體：大中小

來源：轉載

供稿：網友

一個在同一個頁面可多次調用的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>
        <div>
            <div>
                <div>
                    <a href="javascript:void(0);">
                        <img src="images/gb.jpg" /></a></div>
                <div>
                    <p>
                        1111111111111111111111111</p>
                    <div>
                        222222222222222222222222222222222222222222222222222
                    </div>
                    <div>
                        <span>手機號碼：</span><input type="text" /></div>
                    <div>
                        <input type="submit" value="提交" /></div>
                    <p>
                        1.網絡繁忙時會有延遲，請不要在短時間內多次重復發送<br />
                        2.每個手機號碼當日可接收5條樓盤信息
                    </p>
                </div>
            </div>
        </div>
        
        <a href="javascript:void(0);">
            <img src="images/phone.gif" /></a>
    </div>
    <div>
        <div>
            <div>
                <div>
                    <a href="javascript:void(0);">
                        <img src="images/gb.jpg" /></a></div>
                <div>
                    <p>
                        333333333333333333333333333333</p>
                    <div>
                        444444444444444444444444444444
                    </div>
                    <div>
                        <span>手機號碼：</span><input type="text" /></div>
                    <div>
                        <input type="submit" value="提交" /></div>
                    <p>
                        1.網絡繁忙時會有延遲，請不要在短時間內多次重復發送<br />
                        2.每個手機號碼當日可接收5條樓盤信息
                    </p>
                </div>
            </div>
        </div>
        
        <a href="javascript:void(0);">
            <img src="images/phone.gif" /></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>