脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js弹窗效果

js实现弹窗效果

 更新时间：2020年08月09日 13:39:25   作者：星辰落海  
这篇文章主要为大家详细介绍了js实现弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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">&times;</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";
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    下面小编就为大家带来一篇页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 原生javascript实现Tab选项卡切换功能

    原生javascript实现Tab选项卡切换功能

    本文主要介绍了使用原生javascript实现Tab选项卡切换的功能，虽然jQuery有很多类似的插件，单jQuery库着实有点庞大，这种小功能还是直接用javascript来做就好了。
    2015-01-01
  • 小程序自定义tabBar组件封装

    小程序自定义tabBar组件封装

    这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JS格式化数字金额用逗号隔开保留两位小数

    JS格式化数字金额用逗号隔开保留两位小数

    JS格式化数字金额只留两位小数。写了个格式化函数。可以控制小数位数，自动四舍五入，感兴趣的朋友可以了解下
    2013-10-10
  • JavaScript 放大镜 放大倍率和视窗尺寸

    JavaScript 放大镜 放大倍率和视窗尺寸

    对JavaScript 放大镜来说, 计算倍率必不可少.一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗.
    2011-05-05
  • JavaScript DOM API的使用教程及综合案例

    JavaScript DOM API的使用教程及综合案例

    dom是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,下面这篇文章主要给大家介绍了关于JavaScript DOM API的使用教程及综合案例的相关资料,需要的朋友可以参考下
    2023-03-03
  • js中方法重载如何实现？以及函数的参数问题

    js中方法重载如何实现？以及函数的参数问题

    js中没有办法直接实现方法重载，但每一个函数都有一个特殊的参数arguments，利用它可以实现方法的重载，具体示例如下
    2013-08-08
  • 一个关于JS正则匹配的踩坑记录

    一个关于JS正则匹配的踩坑记录

    这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JavaScript实现点击改变图片形状(transform应用)

    JavaScript实现点击改变图片形状(transform应用)

    这篇文章主要为大家详细介绍了JavaScript实现点击改变图片形状，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript指定字段排序方法sortFun函数

    JavaScript指定字段排序方法sortFun函数

    这篇文章主要介绍了JavaScript指定字段排序方法sortFun函数，数组的排序方法是sort，但是它并不支持根据指定的字段进行排序，而sortFun可以根据指定的字段进行排序，需要的朋友可以参考下
    2023-05-05

最新评论