javascript - 模态3个主要问题-6ren

javascript - 模态3个主要问题

转载作者：行者123 更新时间：2023-11-30 06:21:44

我是 Web 开发的新手，我在使用多重模态时遇到了一些问题:

如何:在模式打开时防止背景滚动..
如何:当按 esc 键时关闭模式..
如何:关闭并重新打开相同模式时，样式应恢复正常而无需刷新页面..我没有使用 jQuery 或 Bootstrap 模式..

这是我正在使用的 javascript 代码:

var btn1 = document.getElementById("myBtncourse1");
var btn2 = document.getElementById("myBtncourse2");
var btn3 = document.getElementById("myBtncourse3");
var btn4 = document.getElementById("myBtncourse4");
var btn5 = document.getElementById("myBtncourse5");
var btn6 = document.getElementById("myBtncourse6");

var modal1 = document.getElementById('myModalcourse1');
var modal2 = document.getElementById('myModalcourse2');
var modal3 = document.getElementById('myModalcourse3');
var modal4 = document.getElementById('myModalcourse4');
var modal5 = document.getElementById('myModalcourse5');
var modal6 = document.getElementById('myModalcourse6');

btn1.onclick = function() {
modal1.style.display = "block";}
btn2.onclick = function() {
modal2.style.display = "block";}
btn3.onclick = function() {
modal3.style.display = "block";}
btn4.onclick = function() {
modal4.style.display = "block";}
btn5.onclick = function() {
modal5.style.display = "block";}
btn6.onclick = function() {
modal6.style.display = "block";}

var button1 = document.getElementById("close1");
button1.onclick = function() {
modal1.style.display = "none";}

var button2 = document.getElementById("close2");
button2.onclick = function() {
modal2.style.display = "none";}

var button3 = document.getElementById("close3");
button3.onclick = function() {
modal3.style.display = "none";}

var button4 = document.getElementById("close4");
button4.onclick = function() {
modal4.style.display = "none";}

var button5 = document.getElementById("close5");
button5.onclick = function() {
modal5.style.display = "none";}

var button6 = document.getElementById("close6");
button6.onclick = function() {
modal6.style.display = "none";}

window.onclick = function(event) {
if (event.target == modal1) {
    modal1.style.display = "none";}

if (event.target == modal2) {
    modal2.style.display = "none";}

if (event.target == modal3) {
    modal3.style.display = "none";}

if (event.target == modal4) {
    modal4.style.display = "none";}

if (event.target == modal5) {
    modal5.style.display = "none";}

if (event.target == modal6) {
    modal6.style.display = "none";} }

最佳答案

我建议你只使用 bootstrap 4 modals

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

关于javascript - 模态3个主要问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52717149/

文章推荐： javascript - 在 TreeView Odoo 中单击时禁用日期选择器

文章推荐： java - 使用 Wildlfy 11 嵌入的 Apache Artemis 接收 MQTT 消息

文章推荐： java - 使用 Jackson 反序列化 JSON

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 模态3个主要问题