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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
网站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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
Python数据结构之Array用法实例
2014/10/09 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
使用python实现tcp自动重连
2017/07/02 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python os用法总结
2018/06/08 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
用python实现一个简单的验证码
2020/12/09 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
实习鉴定评语
2014/01/19 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
幼儿园个人总结
2015/02/28 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS