在单个页面上创建多个模式 [英] Creating Multiple Modals on a Single Page

问题描述

我在遵循w3schools.com示例代码的单个网页上创建多个模式时遇到了一些问题。我使用的代码是这样的： http：// www。 w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

在jsfiddle中尝试解决方案后，我发现了一个类似的问题，但我仍然没有任何结果，有没有人有任何想法？

上一主题：
支持多模态单页

https://jsfiddle.net/oa1dr3q6/

 < ; h2>第一模态< / h2> 
 
<！ - 触发器/打开模式 - > 
< button id =myBtn>打开模式< / button> 
 
 <！ -  The Modal  - > 
< div id =myModalclass =modal> 
 
 <！ - 模态内容 - > 
< div class =modal-content> 
< div class =modal-header> 
< span class =close>×< / span> 
< h2>模态标头< / h2> 
< / div> 
< div class =modal-body> 
< p> Modal Body中的一些文本< / p> 
< p>其他一些文字...< / p> 
< / div> 
< div class =modal-footer> 
< h3>模态页脚< / h3> 
< / div> 
< / div> 
< / div> 
 
< h2>第二模态< / h2> 
 
<！ - 触发器/打开模式 - > 
< button id =myBtn>打开模式< / button> 
 
 <！ -  The Modal  - > 
< div id =myModalclass =modal> 
 
 <！ - 模态内容 - > 
< div class =modal-content> 
< div class =modal-header> 
< span class =close>×< / span> 
< h2>模态标头< / h2> 
< / div> 
< div class =modal-body> 
< p> Modal Body中的一些文本< / p> 
< p>其他一些文字...< / p> 
< / div> 
< div class =modal-footer> 
< h3>模态页脚< / h3> 
< / div> 
  

脚本：

  //获取模态
 var modal = document.getElementById（'myModal'）; 
 
 //获取打开模式
的按钮var btn = document.getElementById（myBtn）; 
 
 //获取< span>元素，关闭模式
 var span = document.getElementsByClassName（close）[0]; 
 
 //当用户点击按钮时，打开模式
 btn.onclick = function（）{
 modal.style.display =block; 
} 
 
 //当用户点击< span> （x），关闭模态
 span.onclick = function（）{
 modal.style.display =none; 
} 
 
 //当用户点击模式外的任何地方时，关闭它
 window.onclick = function（event）{
 if（event.target = = modal）{
 modal.style.display =none; 
} 
} 
  

解决方案

你的JSFiddle，确保你使用 class =myBtn而不是 id =myBtn那么它应该可以工作。

以下是完整的工作代码：

HTML：

 < h2> 1st Modal< / h2> 
 
<！ - 触发器/打开模式 - > 
< button class =myBtn>打开模式< / button> 
 
 <！ -  The Modal  - > 
< div id =myModalclass =modal> 
 
 <！ - 模态内容 - > 
< div class =modal-content> 
< div class =modal-header> 
< span class =close>×< / span> 
< h2>模态标头< / h2> 
< / div> 
< div class =modal-body> 
< p> Modal Body中的一些文本< / p> 
< p>其他一些文字...< / p> 
< / div> 
< div class =modal-footer> 
< h3>模态页脚< / h3> 
< / div> 
< / div> 
 
< / div> 
 
< h2>第二模态< / h2> 
 
<！ - 触发器/打开模式 - > 
< button class =myBtn>打开模式< / button> 
 
 <！ -  The Modal  - > 
< div id =myModal2class =modal> 
 
 <！ - 模态内容 - > 
< div class =modal2-content> 
< div class =modal-header> 
< span class =close>×< / span> 
< h2>模态标头< / h2> 
< / div> 
< div class =modal-body> 
< p> Modal Body中的一些文本< / p> 
< p>其他一些文字...< / p> 
< / div> 
< div class =modal-footer> 
< h3>模态页脚< / h3> 
< / div> 
< / div> 
 
< / div> 
  

JS：

  //获取模态
 var modal = document.getElementsByClassName（'modal'）; 
 
 //获取打开模式
的按钮var btn = document.getElementsByClassName（myBtn）; 
 
 
 //获取< span>元素，关闭模态
 var span = document.getElementsByClassName（close）; 
 
 //当用户点击按钮时，打开模式
 btn [0] .onclick = function（）{
 modal [0] .style.display =block ; 
} 
 
 btn [1] .onclick = function（）{
 modal [1] .style.display =block; 
} 
 //当用户点击< span> （x），关闭模态
 span [0] .onclick = function（）{
 modal [0] .style.display =none; 
} 
 
 span [1] .onclick = function（）{
 modal [1] .style.display =none; 
} 
 //当用户点击模态外的任何地方时，关闭它
 window.onclick = function（event）{
 if（event.target == modal）{ 
 modal.style.display =none; 
} 
} 
  

I'm having some issues creating multiple modals on a single webpage following the sample code from w3schools.com. The code in question that I am using is this one: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

I found a similar topic on the problem however after trying that solution in jsfiddle I still came up with no result, does anyone have any ideas?

Previous Topic: Support for Multiple Modal Single Page

https://jsfiddle.net/oa1dr3q6/

<h2>1st Modal</h2>

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

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

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>

<h2>2nd Modal</h2>

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

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

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>

Script:

// 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";
}
}

解决方案

On your JSFiddle, make sure you use class="myBtn" instead of id="myBtn" then it should work.

Here is the full working code:

HTML:

<h2>1st Modal</h2>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<h2>2nd Modal</h2>

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

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

  <!-- Modal content -->
  <div class="modal2-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

JS:

// 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";
    }
}

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