首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 我无法使用我现在使用的代码关闭弹出窗口.我认为它可能会让 wordpress 对我正在使用的 var 感到厌烦，改变了，什么都没有

我试图学习更多一点的Java脚本，但我被一个弹出窗口卡住了，该弹出窗口是我用WordPress创建的一个网站的主页. 我try 更改代码的变量，但似乎不起作用. 我已经看到sole.log(带模式提示)运行良好，但另一个没有显示任何生命迹象.

    <html>
<div class="popup-body_1" id="popup-show_1" style="">
      <div class="popup-wrapper_1">
        <span class="popup-x_1" id="popup-x_1">&times;</span>
        
        <div class="popup-image_1 popup-image-custom_1">
            <img class="product-image_1" src="https://mlservice.blob.core.windows.net/website/UploadBestanden/tn/cc675fd2-f457-4986-af22-2810ce7a3167-1440-420.jpg">
        </div>
        <div class="sign-up_1"> 
          <h2 class="content-cont1_1" ><span class="popup-title_1">Nieuw hier ? </span></h2>
            <p><span class="popup-subtitle_1">laat me <strong>weten</strong><br class="popup-pc_1"> wat ben jij?</span></p>
          <div class="popup-content_1">
 
         <div class="tooltip">   
            <button class="submit-shop_2" href="https://www.werkenbijml.nl/job-dashboard">Ben jij enn werknemer?</button>
         </div>
         <span>
         </span>
         <div>
             <button class="submit-shop_1 custom-btn_1 content-cont3_1" href="https://www.ml-service.nl/">Ben jij een werkgever?</button>
         </div>
          </div>
        </div>
      </div>
    </div>
    </html>

    <style>
.popup-blackout_1{
  position: fixed;
  background: #000;
  display: block;
  opacity: .0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
}

.popup-body_1 {
  width: 75%;
  max-width: 800px;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0 auto;
  background: #e0e6eb;
  border-radius: 20px;
  z-index: 250;
}
.product-image_1{
  border-top-left-radius: 25px;
  border-bottom-left-radius:25px;
}
.popup-content_1{
  margin-top:15%;
}
.popup-wrapper_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 300px;
  box-shadow: 0px 0px 68px -2px rgba(59, 59, 59, 0.5);
  border-radius: 20px;
}

.popup-x_1 {
      font-size: 30px;
    color: white;
    opacity: 1;
    text-align: center;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 300;
    padding: 1px;
    margin: 5px;
}

.popup-wrapper_1 .popup-image_1 {
  width: 100%;
  height: 180px;
  margin-left: -10px;
  margin-top: -22px;
  margin-bottom: -20px;
  display: block;
  
}
.popup-image_1{
    
    overflow: hidden;
    margin: 0px!important;
    background-repeat: no-repeat;
  
  
}
.popup-wrapper_1 .sign-up_1 {
  width: 100%;
  padding: 12px 25px;
}

.popup-wrapper_1 .sign-up_1 p {
  color: #4f708d;
  text-align: center;
}

.popup-wrapper_1 .sign-up_1 .popup-title_1{
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 900;
}

.popup-wrapper_1 .sign-up_1 .popup-subtitle_1{
  font-size: 1.2em;
  font-weight: 500;
}

.popup-wrapper_1 .sign-up_1 .popup-pc_1 {
  display: none;
}

.popup-wrapper_1 .sign-up_1 form {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.popup-wrapper_1 .sign-up_1 form input[type="submit"] {
  margin-bottom: -25px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  font-size: 1.1em;
  background: #4f708d;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(82, 82, 82, 0.2);
}
  
  
.custom-btn_1 {
  margin-bottom: -25px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  font-size: 1.1em;
  background: #4f708d;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(82, 82, 82, 0.2);
}
.submit-shop_2{
    margin-bottom: 5px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  font-size: 1.1em;
  background: #4f708d;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(82, 82, 82, 0.2);
}
  
.content-cont1_1{
  color:#34B0B0;
 margin:25px;
}
.popup-content_1 input{
      padding: 10px 30px;
    border: none;
    border-radius: 10px;
    background-color: aliceblue;
}

.popup-wrapper_1 .sign-up_1 form input[type="submit"]:hover {
  background: #85a3bb;
  cursor: pointer;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1, 
.popup-wrapper_1 .sign-up_1 .popup-nospam_1 {
  font-weight: 300;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1 {
  text-align: center;
  padding: 30px 0 18px 0;
  font-size: 14px;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1 a {
  text-decoration: none;
  color: #8a8a8a;
  letter-spacing: .8px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1 a:hover {
  color: #4f708d;
  font-weight: 400;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks a:after {
  content: '';
  display: block;
  background: #8a8a8a;
  height: 1px;
  max-width: 75px;
  width: 100%;
  margin: 0 auto;
  margin-top: 3px;
}

.popup-wrapper_1 .sign-up_1 .popup-nospam_1 {
  font-size: 10px;
  color: #4f708d;
  font-size: 11px;
  line-height: 15px;
}

.popup-wrapper_1 .sign-up_1 .popup-nospam_1 a {
  text-decoration: none;
  color: #4f708d;
  font-weight: 900;
}

.popup-wrapper_1 .sign-up_1 .popup-nospam_1 span {
  color: #535353;
  text-decoration: underline;
}

.popup-wrapper_1 .sign-up_1 .popup-success_1 {
  padding: 10px 0;
  margin: 0;
  color: #666;
}

.popup-wrapper_1 .sign-up_1 #pupcode {
  height: 30px;
  padding: 5px 15px;
  margin: 0;
  font-size: 1.4em;
  color: black;
  background: rgba(255,255,255,.4)
}

.popup-wrapper_1 .sign-up_1 .code-wrapper_1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
}

.popup-wrapper_1 .sign-up_1 .clipboard_1 {
  background: rgba(255,255,255,.4);
  color: #4f708d;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  display: block;
  cursor: pointer;
}

.popup-wrapper_1 .sign-up_1 .popup-toast_1 {
  display: block;
  width: 0px;
  height: 30px;
  margin: auto;
  margin-top: -30px;
  background: #4f708d;
  text-align: center;
  opacity: .9;
  line-height: 28px;
  color: #fff;
  transform: translateX(-15px);
  transition: all ease .3s;
  overflow: hidden;
  border-radius: 20px;
}

.popup-wrapper_1 .sign-up_1 .popup-toast.active {
  width: 120px;
}

@media(max-width: 539px) {
  .content-cont1_1 {
    position: relative;
    top: 0px;
    text-align: -webkit-center;
    margin-top: 10px;
    font-size:1.7em;
  }
  .content-cont2_1 {
    position: relative;
    top: 47px;
  }
  .content-cont3_1 {
    position: relative;
    top: 16px;
  }
  .popup-content_1 input {
    margin-top: 20px;
  }
 
  
  
  .sign-up_1 p{
    margin:0px 40px;
  }
  .sign-up_1{
    padding:0px!important;
  }
  .popup-wrapper_1{
    min-height:475px!important;
  }
  
}
  
@media(min-width: 540px) {
  .popup-image_1{
    width:50%;
  }
  .sign-up_1{
    width:50%;
  }
  
  .popup-wrapper_1 {
    flex-direction: row;
  }
  .popup-wrapper_1 .popup-image_1 {
    height: auto;
    width: auto;
    margin-top: 0px;
    margin-left: 0;
    margin-bottom: 0;
    object-fit: cover;

    
  
  }
  .submit-shop_1{
    width:80%!important;
    margin-bottom:5%;
  }
  .sign-up_1 h2{
    text-align:center;
  }
  .popup-content_1 input{
    width: 55%;
    padding: 10px 23px;
  }
  .popup-wrapper_1 img{
    width:100%;
    height:100%;
  }
  .popup-wrapper_1 .sign-up {
    width: 50%;
  }
  
  
  
}
@media(max-width:405px){
  
  .content-cont1_1{
    margin-bottom:10px;
  }
  .submit-shop_1{
    margin:0px 0px 25px 0px;
  }
  
}

@media(min-width: 700px) {
  .popup-wrapper_1 .popup-image_1 {
    width: calc(47% + 20px);
    margin-top: -20px;
    
  }
  .popup-wrapper_1 .sign-up_1 {
    width: 53%;
  }
}
  


  
.discount-code_1 {
    font-size: 37px !important;
    background-color: #50B8E7 !important;
    color: white !important;
    cursor: pointer;
}
  
.popup-content_1 {
    width: 100%;
  text-align: center;
 
  
}
  .submit-shop_1 {
    color: white !important;
    width: 215px;
    display: inline-block;
    cursor: pointer;
    text-transform: capitalize; 
    background-color: #34B0B0;
  }


/*Tooltip*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
    </style>

    <script>

var modalbanner = document.getElementById("popup-show_1");

var spanbanner = document.getElementsByClassName("popup-x_1")[0];

setTimeout(function () {
    modalbanner.style.display = "block";
    console.log("modal initiated");
}, 10000);

spanbanner.onclick = function () {
    modalbanner.style.display = "none";
    console.log("closed banner");
}

spanbanner.onclick = function (event) {
    if (event.target == modalbanner) {
        modalbanner.style.display = "closed banner";
    }
}
    </script>

推荐答案

  • 第二个onClick()导致模式不像pistevw所说的那样关闭.
  • 该按钮在隐藏的块内，因此在函数运行后无法单击，请将该按钮放在外面.
  • 要切换样式，可以使用css类列表进行切换，也可以使用全局变量进行切换.
var modal_open = true;
spanbanner.onclick = () => {
  modalbanner.style.display = modal_open?'none':'block';
  modal_open=!modal_open
  console.log((modal_open?'opened':'closed')+' banner');
};

Javascript相关问答推荐

Klaro与Angular的集成

Cypress -使用commands.js将数据测试id串在一起失败，但在将它们串在一起时不使用命令有效

窗口.getComputedStyle()在MutationObserver中不起作用

如何在不创建新键的情况下动态更改 map 中的项目？

在nextjs服务器端api调用中传递认证凭证

函数返回与输入对象具有相同键的对象

为什么Mutations 观察器用微任务队列而不是macrotask队列处理？

如何将Cookie从服务器发送到用户浏览器

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗？没有SQL或任何数据库.只有HTML语言

JQuery Click事件不适用于动态创建的按钮

是什么导致了这种奇怪的水平间距错误(？)当通过JavaScript将列表项元素追加到无序列表时，是否在按钮之间？

如何将数组用作复合函数参数？

类构造函数忽略Reaction Native中的可选字段，但在浏览器中按预期工作

MongoDB受困于太多的数据

判断函数参数的类型

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作，但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

Angel Auth Guard-用户只有在未登录时才能访问登录页面，只有在登录时才能访问其他页面

使用Java脚本筛选数组中最接近值最小的所有项

调试jQuery代码以获取所有行的总和(票证类型)

webpack 5和mini-css-extract-plugin在将scss保存到css文件后不加载css

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630