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


Posted in Javascript onAugust 16, 2013
<!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>
Javascript 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
简单实现JS计算器功能
Dec 21 Javascript
JS实现标签页切换效果
May 04 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
网站404页面3秒后跳到首页的实例代码
Aug 16 #Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 #Javascript
动态加载script文件的两种方法
Aug 15 #Javascript
js string 转 int 注意的问题小结
Aug 15 #Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 #Javascript
js控制表单操作的常用代码小结
Aug 15 #Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 #Javascript
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
nodeJS微信分享
2017/12/20 NodeJs
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
理解Python中的With语句
2015/02/02 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python下载的11种姿势(小结)
2020/11/18 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
大学生暑期实践感言
2014/02/26 职场文书
行政内勤岗位职责
2014/04/07 职场文书
《泉水》教学反思
2014/04/11 职场文书
2014年接待工作总结
2014/11/26 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
行政处罚告知书
2015/07/01 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书