html自动弹出窗效果,JavaScript实现弹出窗口效果
本文实例为大家分享了JavaScript实现弹出窗口的具体代码,供大家参考,具体内容如下
思路
1、总体使用两个div,一个作为底层展示,一个做为弹出窗口;
2、两个窗口独立进行CSS设计,通过display属性进行设置现实与隐藏,此处建议使用display属性而不是visibility属性,visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,影响布局;
3、在js内设计两个onclick事件,分别指定函数,分别为开启弹窗和关闭弹窗。
一、设置两个div
弹出窗口
// 底层div
// 弹出层div
二、对两个div进行独立CSS设置,弹出窗口display设为none
弹出窗口
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;
}
// 底层div
弹窗
// 弹出层div
// 关闭按钮超链接
关闭
此处为弹出窗口
三、定义并设置弹出按钮和关闭窗口函数
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";
}
四、将函数设置到onclick事件中
弹窗
关闭
五、设置关闭链接CSS和pop界面的其余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;
}
六、整体代码
弹出窗口
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";
}
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;
}
弹窗
关闭
此处为弹出窗口
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html自动弹出窗效果,JavaScript实现弹出窗口效果相关推荐
- HTML提交弹出提交中,javascript – 从弹出窗口在父窗口中提交表单?
您可以通过window.opener.document在父窗口中获取对表单的引用,如下所示: var form = window.opener.document.getElementById(&quo ...
- Bootstrap关闭弹出窗导致另一个弹出窗滚动条消失的解决办法
问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框.这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没 ...
- JavaScript - JavaScript自定义弹出对话框
本脚本使用自定义的浮动窗口替代浏览器自己的对话框,效果非常不错.包含Error | Warning | Success | Prompt 四个对话框窗口 兼容性:IE6+ FireFox2+ Oper ...
- html鼠标可拖动窗体,javascript div 弹出可拖动窗口
javascript div 弹出可拖动窗口 更新时间:2009年02月26日 21:50:37 作者: 创建弹出div窗口. /* * 创建弹出div窗口. 1.接口说明:DivWindow(i ...
- 纯JavaScript实现弹出选择第几个单选按钮
为什么80%的码农都做不了架构师?>>> 纯JavaScript实现弹出选择第几个单选按钮 <div id="a" name="aa&quo ...
- Asp.Net中用javascript实现弹出窗口永远居中
//Asp.Net中用javascript实现弹出窗口永远居中 function ShowDialog(url) { var iWidth=600; //模态窗口宽度 var iHei ...
- JavaScript实现弹出“确定/取消”对话框的方法
在网页中经常会让用户提交一些事件,然后在事件处理之前会弹出"确定/取消"对话框,待用户确定后再利用程序处理事件,今天就教大家如何利用JavaScript实现弹出"确定/取 ...
- JavaScript常用弹出框合集
JavaScript常用弹出框合集 JavaScript 有三种类型的弹出框:警告框.确认框和提示框. 警告框 如果要确保信息传递给用户,通常使用警告框.当警告框弹出时,用户将需要单击"确定 ...
- java页面左右浮动窗,使用JavaScript实现上下浮动的窗口
使用JavaScript实现上下浮动的窗口效果.其中主要使用setTimeout函数实现定时设置窗口的left和top值,以实现窗口的上下左右移动.下面是实现代码: 上下浮动的窗口 var stepL ...
最新文章
- 2021-2027年中国透光立体玻璃行业市场深度分析及前瞻研究报告
- CCF CSP 201609-2 火车购票
- PE结构绑定导入实现
- GitHub 实现多人协同提交代码并且权限分组管理
- Http怎么处理长连接
- 06- 本地方法接口
- 64岁Python之父加入微软 | 谁说大龄程序员无出路
- 一文读懂 HMM 模型和 Viterbi 算法
- C#实现人脸识别【SqlHelper】
- [vue] vue性能的优化的方法有哪些?
- zip压缩工具与tar打包并压缩工具
- 计算机网络知识点全面总结,图文并茂,方便大家学习
- 天猫精灵 python_天猫精灵控制esp8266点led灯
- 【独行秀才】macOS Monterey 12.3.1正式版(21E258)
- 猫哥教你写爬虫 033--爬虫初体验-BeautifulSoup-作业
- win10python安装配置selenium
- 今年应届的我面试37次,在16个offer上岸后总结了一些面试心得
- vscode背景图片无法删除
- 三角形边长求高的c语言函数公式,c 求,已知三角形三边边长为abc,利用公式求面积...
- java基于springboot的学生公寓管理系统
热门文章
- github仓库项目自动部署到阿里云
- Photoshop 简笔效果
- linux翻译软件,Linux下的即时翻译软件星际翻译的安装
- ZOJ3876 May Day Holiday
- 《硬核linux攻略》读书笔记更新中
- vivo适配android10,更快更安全,vivo产品经理宣布:iQOO将首批适配Android 10正式版...
- 纪念那些在2019年逝去的技术
- Windbg抓取分析DMP文件
- element-ui的el-upload自定义上传头像
- 钢铁打工人的自我修养,成为一名合格的打工人,自己的工资自己算。(2020年度个人所得税算法)