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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
JavaScript网页定位详解
Jan 13 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
详解php用static方法的原因
2018/09/12 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Django密码存储策略分析
2020/01/09 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
销售员个人求职的自我评价
2014/02/10 职场文书
工会经费申请报告
2015/05/15 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
2016新年感言
2015/08/03 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis