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 相关文章推荐
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python实现word2Vec model过程解析
2019/12/16 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
现金会计岗位职责
2013/12/05 职场文书
大学生自我鉴定
2013/12/16 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle