js实现弹窗效果


Posted in Javascript onAugust 09, 2020

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

思路:

1.创建一个按钮,点击弹出弹窗
2.建立一个弹窗页面 固定定位 默认隐藏
3.将弹窗内容放在弹窗页面的中间
4.js将事件绑定按钮,点击后让弹窗页面显示
5.js事件绑定span标签,点击后让弹窗页面消失

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>弹窗</title>
 <link href="../css/弹窗.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--打开弹窗按钮-->
<button id="btn">打开弹窗</button>
<!--弹窗-->
<div id="myModal">
 <!--弹窗头部-->
 <div class="modal">
 <div class="modal-header">
  <p>危险警告</p>
  <span class="close">×</span>
 </div>
 <!--弹窗文本-->
 <div class="modal-content">
  <p>您将进入一个不安全的页面</p>
</div>
  <!--弹窗底部-->
  <div class="modal-footer">
  </div>
 </div>

  <script src="../js/弹窗.js">
   </script>
</body>
</html>

CSS:

#myModal{
 display: none;
 position: fixed;
 z-index:1;
 left:0;
 top:0;
 width: 100%;
 height:100%;
 overflow: auto;
 background:rgba(0,0,0,0.5);
}
#myModal .modal{
 width: 500px;
 height:300px;
 position: relative;
 top:50%;
 left:50%;
 margin-top: -150px;
 margin-left: -250px;
 animation:animate 1s;
}
.modal .modal-header{
 height:50px;
 background:white;
 color: #000;
 line-height:50px;
 border-bottom: 1px solid #000000;
}
.modal .modal-header p{
 display: inline-block;
 margin:0;
 position: absolute;
 left: 20px;
}
.modal .modal-header .close{
 position: absolute;
 right:20px;
 font-size: 20px;
 cursor:pointer;
}
.modal .modal-content{
 background: white;
 height:200px;
 text-align: center;
 line-height: 200px;
}
.modal .modal-content p{
 margin:0;
}
.modal .modal-footer{
 position: relative;
 height:50px;
 background: white;
}
/*添加动画*/
@keyframes animate{
 from{top:0;opacity:0}
 to{top:50%;opacity:1}
}

js:

window.onload=function () {
 //获取弹窗按钮
 var btn=document.getElementById("btn");
 var close=document.getElementsByClassName("close")[0];
 var myModal=document.getElementById("myModal");
 //按钮绑定事件
 btn.onclick=function () {
  //获取弹窗

  myModal.style.display="block";
 }
 close.onclick=function () {
  myModal.style.display="none";
 }
 //用户点击其他地方关闭弹窗
 window.onclick=function (event) {
  if(event.target ==myModal){
   myModal.style.display="none";
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
对比分析json及XML
Nov 28 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
js实现表格数据搜索
Aug 09 #Javascript
js实现微信聊天界面
Aug 09 #Javascript
js实现微信聊天效果
Aug 09 #Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
js仿京东放大镜效果
Aug 09 #Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
You might like
基于mysql的论坛(3)
2006/10/09 PHP
PHP里的中文变量说明
2011/07/23 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php生成HTML文件的类方法
2019/10/11 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python多进程编程常用方法解析
2020/03/26 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
个人年终总结结尾
2015/03/06 职场文书
采购员岗位职责范本
2015/04/07 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记