如何关闭空间:如何限制在用户空白空间中关闭模型

当我试图点击提交按钮时,当用户点击空空间时,一个模态将在该模型中打开它将关闭。我需要限制模态关闭,唯一的用户可以使用 X 标记关闭。我需要添加一个时间间隔,以便在五分钟后自动关闭模态。

我使用核心 JavaScript 请帮助我任何人都知道

        // Get the modal
        var modal = document.getElementById('myModal');
    
        // Get the on that opens the modal
        var btn = document.getElementById("btn_sum");
    
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
    
          
        // When the user clicks the on, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
        }
    
    
        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }
    
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
        /* Modal Style */
        
        /* Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 20px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: scroll; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
    
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 60%;
        
top:10px;
        
height:auto;
        }
    
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
    
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    
    
        }
    
<div class="submit_btn" style="padding:10px;"><on class="on" id="btn_sum"><span>Submit </span></on></div>
  <div class="modal" id="myModal"><!-- Modal content -->
   <div class="modal-content"><span class="close">&times;</span>
   <h5>Thanks For Submitting Your Details, You Get a cupon Code Shortly</h5>
</div>
        </div>
1

这个演示工作在 5 秒,如果用户不交互该模块将关闭,使其在 5 分钟后工作,你应该替换数字 5000 到 300,000,其中(1000 * 60 * 5 = 300,000):

var modal = document.getElementById("myModal");
// Get the on that opens the modal
var btn = document.getElementById("btn_sum");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the on, open the modal
btn.addEventListener("click", function(event) {
  modal.style.display = "block";
  setTimeout(event => {
    modal.style.display = "none";
//      close after 5 secounds for demo
//      where every 1000 = 1 secound
  }, 5000);
});
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
};
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 20px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: scroll; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
    
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 60%;
        
top:10px;
        
height:auto;
        }
    
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
    
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    
    
        
<div class="submit_btn" style="padding:10px;"><on class="on" id="btn_sum"><span>Submit </span></on></div>
<div class="modal" id="myModal">
  <!-- Modal content -->
  <div class="modal-content"><span class="close">&times;</span>
    <h5>Thanks For Submitting Your Details, You Get a cupon Code Shortly</h5>
  </div>
</div>
1

您有window.onclick事件,当您在模态外部单击时关闭模态,您需要删除它。要在特定时间后关闭模态,您可以使用 javascript 的setTimeout。我还建议在加载文档后运行 JS

$(document).ready(function() {
  // Get the modal
  var modal = document.getElementById("myModal");
  // Get the on that opens the modal
  var btn = document.getElementById("btn_sum");
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  // When the user clicks the on, open the modal
  btn.onclick = function() {
    modal.style.display = "block";
      // you wanna set 3000 to 300000 to close after 5 min
  setTimeout(() => {
    modal.style.display = "none";
  }, 3000);
  };
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  };
});
/* Modal Style */
/* Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  top: 10px;
  height: auto;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
  <head> 
    <!-- jquery -->
    <script src="https://ajax.googlea.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  </head>
  <body>
    <div class="submit_btn" style="padding:10px;">
      <on class="on" id="btn_sum">
        <span>Submit </span>
      </on>
    </div>
    <div class="modal" id="myModal">
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <h5>
          Thanks For Submitting Your Details, You Get a cupon Code Shortly
        </h5>
      </div>
    </div>
  </body>
</html>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(378)
Qss样式:将字体加载到Qt应用程序的.qss样式表中
上一篇
C语言system函数:C系统 ()函数(c system function)
下一篇

相关推荐

  • docker游戏服务器:如何使用Docker搭建高性能的游戏服务器

    Docker游戏服务器是一种将游戏服务器部署到容器中的方式,它可以帮助游戏开发者快速、轻松地部署游戏服务器,并且可以更轻松地扩展游戏服务器的容量。…

    2023-04-27 09:55:33
    0 66 27
  • win7玩cf卡顿怎么解决:解决Win7环境下CF游戏卡顿问题

    尝试更新系统:可能是由于系统缺少某些补丁或者更新导致CF卡顿,可以尝试在Windows Update中进行检查更新,并安装最新的补丁和更新。更新显卡驱动:可能是由于显卡驱动过旧或者不兼容导致CF卡顿,可以尝试更新显卡驱动,可以到显卡厂商官网下载最新的驱动进行安装。…

    2023-05-27 11:45:17
    0 44 49
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-04-01 13:03:36
    0 88 19
  • android 视频编码深入理解MediaCodec API

    Android 视频编码是指将原始视频数据经过压缩编码后,生成新的视频数据,以便减少视频文件的体积,提高传输速度,以及更好地在 Android 设备上播放。…

    2023-01-13 10:58:18
    0 28 30
  • java ee eclipse使用:如何使用Java EE Eclipse来开发Web应用

    示例示例Java EE Eclipse使用步骤:安装Eclipse IDE。…

    2023-10-12 04:51:32
    0 43 25
  • javascript数组:排序和搜索

    javascript数组是一种特殊的对象,它可以存储多个值,这些值可以是任何类型的数据。JavaScript数组的元素可以通过索引来访问,数组的索引从0开始,每个元素都有一个索引值。…

    2023-08-28 11:30:24
    0 38 81
  • cookie如何使用:如何使用Cookie来改善用户体验

    Cookie是一种存储在客户端的小型文件,用于记录用户的信息,如访问时间、登录状态等。使用Cookie可以更好地为用户提供服务,比如保存用户的登录状态,记录用户的浏览历史记录等。…

    2023-05-07 02:18:11
    0 41 66
  • cv小敢:如何利用CV小敢提升职业技能?

    cv小敢(Computer Vision Tiny-YOLO)是一种轻量级的物体检测算法,它可以在资源受限的设备上运行,如嵌入式设备、智能手机等。它是基于YOLO(You Only Look Once)算法的一个变体,由Joseph Redmon和Ali Farhadi开发,旨在提高深度学习模型的性能,同时减少模型的大小和计算复杂度。…

    2023-02-09 13:08:59
    0 97 63

发表评论

登录 后才能评论

评论列表(28条)