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>

赞 (0)

相关推荐

  • javascript jq 弹出层实例

    复制代码 代码如下: <!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=&qu

  • 纯JavaScript实现的完美渐变弹出层效果代码

    纯JavaScript实现的完美渐变弹出层效果代码

    如题,本文将使用纯粹的脚本JavaScript实现渐变的弹出层,其想法也非常简单:利用IFrame实现遮盖,再借助一个DIV用于展现弹出层的内容,最后再使用其内置函数setInterval()和clearInterval()实现渐变,原理非常简单,只不过要注意对DOM对象/元素的精确控制.由于代码比较简单,在此就不再赘述.以下代码在IE6+,FF3.5+测试通过. 脚本Flyout.js: 复制代码 代码如下: // JScript File if (navigator.userAgent.to

  • javascript 弹出层居中效果的制作

    问题:做一个带拖动的弹出层效果(像提示框那种) 先写了一半,明天继续奋斗: javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f

  • JavaScript 点击页面上的按纽，弹出层，背景变灰

    点击页面上的按纽,弹出一个层,背景变灰 点击页面上的按纽,弹出一个层,背景变灰 function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor= "#336699 ";//提示窗口的边框颜色 titlecolor= "#99CCFF ";//提示窗口的标题颜色 var sWidth

  • javascript实现的弹出层背景置灰-模拟(easyui dialog)

    javascript实现的弹出层背景置灰-模拟(easyui dialog)

    页面比较丑,只把功能实现了.^ ^ 复制代码 代码如下: <title>模仿easyui dialog的效果</title> <script> //取得页面元素 var getElement = function() { return document.getElementById(arguments[0]) || false; } function openDialog(dialogId) { var maskId = "mask"; //如果有,

  • JavaScript点击按钮后弹出透明浮动层的方法

    本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法.分享给大家供大家参考.具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <META http-equiv=Content-Type content="text/htm

  • javascript 弹出层组件（升级版）

    这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住.第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随.大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复. 下面是代码,里面都有注释,可以直接运行. 在线演示 http://demo.jb51.net/js/20

  • javascript弹出层输入框(示例代码)

    如下所示: 复制代码 代码如下: <script language="javascript" type="text/javascript">         function alertWin(title, msg, w, h) { var titleheight = "22px"; // 窗口标题高度             var bordercolor = "#666699"; //窗口的边框颜色      

  • 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=&q

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

  • vue2.0的contextmenu右键弹出菜单的实例代码

    整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享. 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>

  • Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)

    实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他们的执行顺序是从上到下 import android.app.Dialog; import android.content.Context; import android.graphics.Color; import android.graphics.drawable.ColorDrawable;

  • vue3弹出层V3Popup实例详解

    vue3弹出层V3Popup实例详解

    Vue3-Popup 基于vue3构建的手机端自定义弹层组件. 一款集合了msg.alert.dialog.modal.actionSheet.toast等多种效果的Vue3自定义弹层组件.支持上下左右弹出.圆角.自定义弹层样式.多按钮及长按/右键功能. 引入v3popup // 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup fro

  • layui弹出层效果实现代码

    layui弹出层效果实现代码

    本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> &

  • Javascript公共脚本库系列(一): 弹出层脚本

    Javascript公共脚本库系列(一): 弹出层脚本

    一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图:  点击图中的"航空公司"后,会在"航空公司"下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS框架又有些杀鸡用牛刀.所以

  • js 点击页面其他地方关闭弹出层(示例代码)

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Gen

  • javascript面向对象的方式实现的弹出层效果代码

    说到js的面向对象,就不得不提到prototype这个js内置属性了(注意:这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性.我现在要做的就是尽可能的让代码达到公用,像继承啦之类的.好了,这些就不多说了,对prototype不了解的可以搜索下相关内容. 今天要做的是点击一个html元素让其弹出一个友好的对话框来,首先要明确两点,一点是我可能会大量的用到这种方式,甚至不希望出现系统的alert或confirm,第二点就是弹出的内

随机推荐