JavaScript实现弹出窗口效果


Posted in Javascript onDecember 09, 2020

本文实例为大家分享了JavaScript实现弹出窗口的具体代码,供大家参考,具体内容如下

思路

1、总体使用两个div,一个作为底层展示,一个做为弹出窗口;
2、两个窗口独立进行CSS设计,通过display属性进行设置现实与隐藏,此处建议使用display属性而不是visibility属性,visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,影响布局;
3、在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(){
  // 获取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>

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

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

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

<style type="text/css">
 /* 关闭链接样式 */
 #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>

六、整体代码

<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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
五句话帮你轻松搞定js原型链
Dec 09 #Javascript
JS常用跨域方法实现原理解析
Dec 09 #Javascript
video.js添加自定义组件的方法
Dec 09 #Javascript
手把手教你如何编译打包video.js
Dec 09 #Javascript
ES6 十大特性简介
Dec 09 #Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 #Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 #Javascript
You might like
php中的strpos使用示例
2014/02/27 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python 定时器,轮询定时器的实例
2019/02/20 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
个人贷款承诺书
2014/03/28 职场文书
初中家长寄语
2014/04/02 职场文书
企业法人授权委托书
2014/04/03 职场文书
教师产假请假条范文
2014/04/10 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
物理课外活动总结
2014/08/27 职场文书
结婚司仪主持词
2015/06/29 职场文书
婚宴领导致辞
2015/07/28 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
Python中常见的导入方式总结
2021/05/06 Python
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL