js实现弹窗效果

站长资源 2024/11/5 佚名

74 1538 74

相思资源网 Design By www.200059.com

本文实例为大家分享了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="/UploadFiles/2021-04-02/弹窗.js">

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";
  }
 }
}


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

js,弹窗

标签：

js,弹窗

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“js实现弹窗效果”

暂无js实现弹窗效果的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

js实现弹窗效果

js,弹窗

js实现盒子移动动画效果

js实现表格数据搜索

评论“js实现弹窗效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接