如何为html中的不同元素指定某些模态？

问题描述 投票：0回答：2

我正在尝试为多个元素添加多个模式，但我使用的代码仅适用于一个元素，每当我尝试添加多个元素时，它们就会停止工作，请问，应该如何完成？这些是一个文档中的 HTML、CSS 和 JavaScript：

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
body {font-family: Arial, Helvetica, sans-serif;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.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>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>

<h2>Modal Example</h2>

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

</body>
</html>

我尝试添加多个模式，但没有成功。

javascript html css modal-dialog popup
2个回答
0
投票

我是否理解正确，您想通过单击不同的元素来调用模式窗口？我又添加了两个按钮，一切正常。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {font-family: Arial, Helvetica, sans-serif;}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

</style>

</head>
<body>

<h2>Modal Example</h2>

<button id="myBtn" class="myBtn">Open Modal</button>
<button id="myBtn2" class="myBtn">Open Modal</button>
<button id="myBtn3" class="myBtn">Open Modal</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
    </div>
</div>
<script language="JavaScript">

var modal = document.getElementById("myModal");

let btns = document.getElementsByClassName("myBtn");

var span = document.getElementsByClassName("close")[0];

[].forEach.call(btns, function (btn) {
    btn.addEventListener('click', function(){
        modal.style.display = "block";
    });
});


span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>
0
投票

试试这个：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {font-family: Arial, Helvetica, sans-serif;}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

</style>

</head>
<body>

<h2>Modal Example</h2>

<button id="myBtn1" data-id="1" class="myBtn">Open Modal</button>
<button id="myBtn2" data-id="2" class="myBtn">Open Modal</button>
<button id="myBtn3" data-id="3" class="myBtn">Open Modal</button>

<div id="myModal1" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal1..</p>
    </div>
</div>
<div id="myModal2" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal2..</p>
    </div>
</div>
<div id="myModal3" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal3..</p>
    </div>
</div>
<script language="JavaScript">


let btns = document.getElementsByClassName('myBtn');
let closeBtns = document.getElementsByClassName("close");


[].forEach.call(btns, function(btn) {
    btn.onclick = function() {
        modal = document.getElementById("myModal" + btn.getAttribute('data-id'));
        if (modal) {
            modal.style.display = "block";
        }
    };
});

[].forEach.call(closeBtns, function(span) {
    span.onclick = function() {
        let parentModal = this.closest(".modal");
        if (parentModal) {
            parentModal.style.display = "none";
        }
    };
});

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

添加带有数字的按钮数据 ID，该数字对应模式窗口 ID。例如 data-id="1" 将打开 myModal1

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.