JavaScript - 弹出层

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量396 收藏
点赞数
分类专栏： 软件开发 文章标签： javascript div function input button float
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>popup.html</title>
        <style>
        * {
            margin: 0;
        }
        
        body {
            font-size: 9pt;
        }
        
        #container div {
            margin-top: 6px;
        }
        
        #select_city h3 {
            float: left;
        }
        
        #main_city,#all_province {
            clear: both;
        }
        
        #main_city div,#all_province div {
            width: 588px;
            clear: left;
        }
        
        #main_city h4,#all_province h4 {
            float: left;
            display: inline;
            font-size: 16px;
        }
        
        #main_city div span,#all_province div span {
            margin: 0 9px;
            cursor: pointer;
            font-size: 14px;
        }
        
        #float_lay {
            width: 220px;
            height: 122px;
            border: 1px #787878 solid;
            position: absolute;
            background: #fff;
            z-index: 999;
            display: none;
        }
        </style>
        <script type="text/javascript">
        //弹出层
        function openLayer(objId, conId) {
            var arrayPageSize = getPageSize();//调用getPageSize()函数
            var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
            if (!document.getElementById("popupAddr")) {
                //创建弹出内容层
                var popupDiv = document.createElement("div");
                //给这个元素设置属性与样式
                popupDiv.setAttribute("id", "popupAddr")
                popupDiv.style.position = "absolute";
                popupDiv.style.border = "1px solid #ccc";
                popupDiv.style.background = "#fff";
                popupDiv.style.zIndex = 99;
                //创建弹出背景层
                var bodyBack = document.createElement("div");
                bodyBack.setAttribute("id", "bodybg")
                bodyBack.style.position = "absolute";
                bodyBack.style.width = "100%";
                bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
                bodyBack.style.zIndex = 98;
                bodyBack.style.top = 0;
                bodyBack.style.left = 0;
                bodyBack.style.filter = "alpha(opacity=50)";
                bodyBack.style.opacity = 0.5;
                bodyBack.style.background = "#ddf";
                //实现弹出(插入到目标元素之后)
                var mybody = document.getElementById(objId);
                insertAfter(popupDiv, mybody);//执行函数insertAfter()
                insertAfter(bodyBack, mybody);//执行函数insertAfter()
            }
            //显示背景层
            document.getElementById("bodybg").style.display = "";
            //显示内容层
            var popObj = document.getElementById("popupAddr")
            popObj.innerHTML = document.getElementById(conId).innerHTML;
            popObj.style.display = "";
            //让弹出层在页面中垂直左右居中(统一)
            // popObj.style.width  = "600px";
            // popObj.style.height = "400px";
            // popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
            // popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px';
            //让弹出层在页面中垂直左右居中(个性)
            var arrayConSize = getConSize(conId)
            popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 - 50 + 'px';
            popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 - 30 + 'px';
        }
        //获取内容层内容原始尺寸
        function getConSize(conId) {
            var conObj = document.getElementById(conId)
            conObj.style.position = "absolute";
            conObj.style.left = -1000 + "px";
            conObj.style.display = "";
            var arrayConSize = [ conObj.offsetWidth, conObj.offsetHeight ]
            conObj.style.display = "none";
            return arrayConSize;
        }
        function insertAfter(newElement, targetElement) {//插入
            var parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }
        //获取滚动条的高度
        function getPageScroll() {
            var yScroll;
            if (self.pageYOffset) {
                yScroll = self.pageYOffset;
            } else if (document.documentElement && document.documentElement.scrollTop) {
                yScroll = document.documentElement.scrollTop;
            } else if (document.body) {
                yScroll = document.body.scrollTop;
            }
            arrayPageScroll = new Array('', yScroll)
            return arrayPageScroll;
        }
        //获取页面实际大小
        function getPageSize() {
            var xScroll, yScroll;
            if (window.innerHeight && window.scrollMaxY) {
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) {
                sScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else {
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }
            var windowWidth, windowHeight;
            if (self.innerHeight) {
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
            } else if (document.documentElement
                    && document.documentElement.clientHeight) {
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) {
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
            var pageWidth, pageHeight
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }
            if (xScroll < windowWidth) {
                pageWidth = windowWidth;
            } else {
                pageWidth = xScroll;
            }
            arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
            return arrayPageSize;
        }
        //关闭弹出层
        function closeLayer() {
            document.getElementById("popupAddr").style.display = "none";
            document.getElementById("bodybg").style.display = "none";
            return false;
        }
        </script>
                <script type="text/javascript">
        //对"拖动点"定义：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
        var move = false, oldcolor, _X, _Y;
        function StartDrag(obj) { //定义准备拖拽的函数
            obj.setCapture(); //对当前对象的鼠标动作进行跟踪
            oldcolor = obj.style.backgroundColor;
            obj.style.background = "#999";
            move = true;
            //获取鼠标相对内容层坐标
            var parentwin = document.getElementById("popupAddr");
            _X = parentwin.offsetLeft - event.clientX
            _Y = parentwin.offsetTop - event.clientY
        }
        function Drag(obj) { //定义拖拽函数
            if (move) {
                var parentwin = document.getElementById("popupAddr");
                parentwin.style.left = event.clientX + _X;
                parentwin.style.top = event.clientY + _Y;
            }
        }
        function StopDrag(obj) { //定义停止拖拽函数
            obj.style.background = oldcolor;
            obj.releaseCapture(); //停止对当前对象的鼠标跟踪
            move = false;
        }
        </script>
    </head>
    <body>
        <input name="Input" id="test" value="点击弹出层" type="button" οnclick="openLayer('test','test_con')" />
        <div id="test_con" style="display: none">
            <div id="tab" style="padding: 8px;">
                <div id="tabtop">
                    <div id="tabtop-L">
                        <strong>层的标题在这里</strong>
                    </div>
                    <div id="tabtop-R" οnclick="closeLayer()">
                        <strong>[关闭层]</strong>
                    </div>
                </div>
                <div id="tabcontent">
                    内容写在这里。。
                </div>
            </div>
        </div>
        <br>
        <br>
        <input name="Input" id="test3" value="可拖动层" type="button" οnclick="openLayer('test3','test_con3')" />
        <div id="test_con3" style="display: none">
            <div id="tab3" style="width: 360px; height: 200px; background: #fee;">
                <div id="tabtop3">
                    <div id="tabtop-L3" onMousedown="StartDrag(this)"
                        onMouseup="StopDrag(this)" onMousemove="Drag(this)">
                        <strong style="color: red; font-size: 20px">可拖动层的标题</strong>
                    </div>
                    <div id="tabtop-R3" οnclick="closeLayer()">
                        <strong>[关闭层]</strong>
                    </div>
                </div>
                <div id="tabcontent3" style="padding: 8px">
                    欢迎回来
                </div>
            </div>
        </div>
    </body>
</html>


crazycode_1985
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript jq 弹出层实例
10-26
javascript jq 弹出提示效果实现的方法有很多，可能会在某些地方看到过，下面为大家演示个示例介绍下如何实现jq 弹出层，感兴趣的朋友可以参考下
JavaScript弹出层
weixin_34117522的博客
03-13 90
1.这个弹出层就是一个DIV 2.看需要什么效果   2.1.如果是仅仅需要弹出层，而背后的网页同样可以点击，那么只需要一个DIV即可，效果如图：             2.2.需要一层透明背景，而后面的网页只能看不能点，效果如图：    像这种，就需要至少两个DIV，一个负责显示中间的小部分，另一个DIV就负责显示后台灰色半透明的层。   这里有一个第二种情况的例子： ...
js 封装弹出层简单方法
Liang_nm的博客
01-11 1349
1.js代码 function Tanshow(){ } Tanshow.prototype.$alert=function(title,content){ //弹出方法 （传行参） var divDom=document.createElement("div") //创建div节点 divDom.setAttribute("id","tan") //给div设置id var h1Dom=document.createElement("h1") //创建h1节点
javascript php 界面,基于Javascript实现弹出页面效果_javascript技巧
weixin_39795268的博客
03-12 129
弹出层效果是一个很实用的功能，很多网站都采用了这种方式实现登录和注册，比如百度：弹出层的特点：点击登录或注册的时候在页面的中间部分弹出一个登录或注册区域并且页面有一个遮罩层，而且登录框在遮罩层之上，也就是登陆框的z-index值要大于遮罩层的z-index值。当点击关闭或者遮罩层时关闭登录或者注册框(有的网页没有实现点击遮罩层关闭登录或注册区域的功能。)。最近也做了一个类似的弹出层的效果，先展示一...
html运用javascript设计弹窗,js实现弹出窗口之弹出层的例子
weixin_42578963的博客
06-05 195
代码如下：复制代码 代码示例:弹出窗口之弹出层_www.jquerycn.cn#popupcontent{position: absolute;visibility: hidden;overflow: hidden;border:1px solid #CCC;background-color:#F9F9F9;border:1px solid #333;padding:5px;}var baseTe...
uni-popup 弹出层
liaozhaorong的博客
03-11 3063
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template><view>@click=>成功</button>@click=>错误</button>@click=>警告</button>
javascript实现弹出层效果
10-15
主要为大家详细介绍了javascript实现弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript制作弹出层效果
10-20
弹出层效果大家在网站上经常遇到此功能，下面小编给大家分享一段js代码制作弹出层效果，代码简单易懂，非常不错，需要的朋友参考下吧
使用JavaScript实现弹出层效果的简单实例
10-22
下面小编就为大家带来一篇使用JavaScript实现弹出层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1094
​​​​​​​。
一个小时学习javaScript
weixin_43064364的博客
04-20 839
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1451
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 732
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 475
官网代码（在取消选中状态的时候不生效）
PLSQL的下载与安装
code袁的博客
04-18 534
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
Vue.js（自定义指令）
Luo3255069063的博客
04-18 450
【代码】Vue.js（自定义指令）
vue 实现级联选择器功能
清音的博客
04-22 435
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
el-dialog弹出层组件
11-22
el-dialog是一个基于Element UI的弹出层组件，可以用于显示对话框、提示框、操作确认框等。它具有以下特点： - 可以自定义标题、内容、按钮等。 - 可以设置弹出层的大小、位置、遮罩层等样式。 - 可以通过v-model...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值