Javascript 在一个页面上创建多个模态_Javascript_Html_Modal Dialog

Javascript 在一个页面上创建多个模态

javascript html

Javascript 在一个页面上创建多个模态,javascript,html,modal-dialog,Javascript,Html,Modal Dialog,根据w3schools.com的示例代码，在一个网页上创建多个模态时遇到一些问题。我正在使用的代码是：我在这个问题上发现了一个类似的主题，但是在JSFIDLE中尝试了这个解决方案之后，我仍然没有得到任何结果，有人有什么想法吗上一主题： 1st模态开放模态 × 模态头情态体中的一些文本其他一些文本模态页脚第二模态开放模态 × 模态头情态体中的一些文本其他一些文本模态页脚脚本： // Get the modal var modal = document.getEle

根据w3schools.com的示例代码，在一个网页上创建多个模态时遇到一些问题。我正在使用的代码是：

我在这个问题上发现了一个类似的主题，但是在JSFIDLE中尝试了这个解决方案之后，我仍然没有得到任何结果，有人有什么想法吗

上一主题：

1st模态
开放模态
×
模态头
情态体中的一些文本
其他一些文本
模态页脚
第二模态
开放模态
×
模态头
情态体中的一些文本
其他一些文本
模态页脚

脚本：

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

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

在您的JSFIDLE上，确保使用

class=“myBtn”

而不是

id=“myBtn”

，然后它就可以工作了

以下是完整的工作代码：

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>

// 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[0]) {
         modal[0].style.display = "none";
     }
    if (event.target == modal[1]) {
         modal[1].style.display = "none";
     }  
}

1st模态
开放模态
×
模态头
情态体中的一些文本
其他一些文本
模态页脚
第二模态
开放模态
×
模态头
情态体中的一些文本
其他一些文本
模态页脚

JS:

<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>

// 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[0]) {
         modal[0].style.display = "none";
     }
    if (event.target == modal[1]) {
         modal[1].style.display = "none";
     }  
}

//获取模式
var modal=document.getElementsByClassName（'modal'）；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
//当用户单击该按钮时，打开模式对话框
btn[0]。onclick=function（）{
模态[0]。style.display=“块”；
}
btn[1]。onclick=function（）{
模态[1]。style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span[0]。onclick=function（）{
模态[0]。style.display=“无”；
}
span[1]。onclick=function（）{
模态[1]。style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态[0]）{
模态[0]。style.display=“无”；
}
如果（event.target==模态[1]）{
模态[1]。style.display=“无”；
}  
}

为什么要使用这么多的代码和javascript来完成一些仅使用CSS和HTML就可以完成的事情？（当然可以添加简化示例、动画等）

[id^=modal]{
显示：无；
边框：1px纯红；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
最小高度：3em；
最小宽度：5em；
最大宽度：10em；
}
输入[类型=复选框]{
位置：绝对位置；
剪辑：rect（0）；
}
#模式1：目标{
显示：块；
}
#模式2：目标{
显示：块；
}
[id^=modal]a{
浮动：对；
}


这是内容容器


这是第一个模态
这是第二种模式

您为两个模式触发按钮指定了相同的Id。不同的元素不应该有相同的Id
在JavaScript代码中，始终选择单个元素（单个关闭按钮、单个打开按钮等）

我认为这是一个HTML/JS初学者的错误。这将有助于：

//获取打开模式对话框的按钮
var btn=document.queryselectoral（“button.modal button”）；
//所有页面模态
var modals=document.querySelectorAll（'.modal'）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
//当用户单击该按钮时，打开模式对话框
对于（变量i=0；i


/*模式（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*