JavaScript实现弹出窗口

思路

总体使用两个div，一个作为底层展示，一个做为弹出窗口；
两个窗口独立进行CSS设计，通过display属性进行设置显示与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局；
在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。

一、设置两个div

<html>
<title>弹出窗口</title>
<head><meta charset="UTF-8">
</head>
<body>// 底层div<div id="popLayer"></div>// 弹出层div<div id="popDiv"></div>
</body>
</html>

二、对两个div进行独立CSS设置，弹出窗口display设为none

<html>
<title>弹出窗口</title>
<head><meta charset="UTF-8"><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}</style>
</head>
<body>// 底层div<div id="popLayer"><button onclick="">弹窗</button></div>// 弹出层div<div id="popDiv"><div class="close">// 关闭按钮超链接<a href="" onclick="">关闭</a></div><p>此处为弹出窗口</p></div>
</body>
</html>

三、定义并设置弹出按钮和关闭窗口函数

<script type="text/javascript">function popDiv(){// 通过唯一id值获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer");// 控制两个div的显示与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 通过唯一id值获取弹出窗口元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}
</script>

四、将函数设置到onclick事件中

<button onclick="popDiv();">弹窗</button>
<a href="javascript:void(0)" onclick="closePop()">关闭</a>

五、设置关闭链接CSS和pop界面的其余CSS

<style type="text/css">/* 关闭链接样式 */#popDiv .close a {/* 设置字体颜色 */color: #2D2C3B;}/* 弹出界面的关闭链接 */#popDiv .close{/* 设置文本靠右显示，也就是关闭按钮显示在右边 */text-align: right;margin-right: 5px;/* 背景颜色 */background-color: #F8F8F8;}#popDiv p{/* 设置文本居中显示，这里显示的就是弹出窗口的内容，可以自行设置 */text-align: center;/* 设置字体大小和宽度 */font-size: 25px;font-weight: bold;}</style>

六、整体代码

<html>
<title>弹出窗口</title>
<head><meta charset="UTF-8"><script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer");// 控制两个div的显示与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗口元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}/* 关闭按钮样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界面的关闭按钮 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style>
</head>
<body><div id="popLayer"><button onclick="popDiv();">弹窗</button></div><div id="popDiv"><div class="close"><a href="javascript:void(0)" onclick="closePop()">关闭</a></div><p>此处为弹出窗口</p></div>
</body>
</html>

JavaScript：简单实现弹出窗口div相关推荐

JavaScript中的弹出窗口
JavaScript中的对话框.弹出框.提示框前端页面 <!DOCTYPE html> <html lang="en"><head><m ...
用JavaScript 制作多彩的弹出式说明窗口
用JavaScript 制作多彩的弹出式说明窗口在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹 ...
如何控制弹出窗口的大小、尺寸、位置等的样式
原文地址:http://www.leadto.com.cn/technews/316.html 1.最基本的弹出窗口代码 <SCRIPT LANGUAGE="javascript&qu ...
用jQuery实现弹出窗口/弹出div层
原文链接:http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9 http://blog.163.com/qiuxinke2006@12 ...
点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
Web最基本的弹出窗口代码(javascript)
[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.h ...
【CSS实现Loading遮罩】点击按钮，弹出一个DIV层窗口
加载中 gif 图片: 页面效果: 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
JavaScript自适应图片大小的弹出窗口
很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看. 实现此功能的最简单作法是用以下HTML代码创建一个图像链接: < ...

JavaScript：简单实现弹出窗口div

JavaScript实现弹出窗口

思路

一、设置两个div

二、对两个div进行独立CSS设置，弹出窗口display设为none

三、定义并设置弹出按钮和关闭窗口函数

四、将函数设置到onclick事件中

五、设置关闭链接CSS和pop界面的其余CSS

六、整体代码

JavaScript：简单实现弹出窗口div相关推荐

最新文章

热门文章