支持多模式单页 [英] Support for Multiple Modal Single Page

问题描述

我正在尝试使用一些示例代码形式w3schools.com在单个页面上包含多个模式.我在下面包含了我要使用的代码.我从这里得到了代码. http://www.w3schools.com/howto/howto_css_modals.asp

I'm trying to use some sample code form w3schools.com to include multiple modals on a single page. I've included the code that I'm trying to use below. I got the code from here. http://www.w3schools.com/howto/howto_css_modals.asp

这是运行中的代码的示例.请注意，第一个模态有效，但第二个模态不出现. https://jsfiddle.net/y0uavmo0/

Here is an example of the code in action. Note that the first Modal works, but the second Modal does not appear. https://jsfiddle.net/y0uavmo0/

HTML:

<h2>Modal Example1</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal1</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>Some text in the Modal..1</p>
  </div>

</div>


<h2>Modal Example2</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal2</button>

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal2-content">
    <span class="close">×</span>
    <p>Some text in the Modal..2</p>
  </div>
</div>

JS:

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, 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";
    }
}
</script>

推荐答案

您引用的两个按钮都具有相同的ID.因此，事件仅绑定到第一个按钮，因为它首先出现在DOM中.

You are referring both the buttons with same id. So event is only bind for the first button as it is appearing first in the DOM.

如果您要像下面那样更改JS代码

If you will change the JS code like below

// Get the modal
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
btn[0].onclick = function() {
    modal[0].style.display = "block";
}

btn[1].onclick = function() {
    modal[1].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
    modal[0].style.display = "none";
}

span[1].onclick = function() {
    modal[1].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";
    }
}

以及类似

<h2>Modal Example1</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Open Modal1</button>

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>Some text in the Modal..1</p>
  </div>

</div>


<h2>Modal Example2</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn" class="myBtn">Open Modal2</button>

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal2-content">
    <span class="close">×</span>
    <p>Some text in the Modal..2</p>
  </div>

</div>

这将开始工作.尽管您的模式2中会遇到一些CSS问题.

This will start working. though you will have some css issues in your modal 2.

这篇关于支持多模式单页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！