Question

我有一个显示弹出窗口的问题。我有2个弹出窗口。它们是通过PHP foreach（回声）生成的......问题是，每次只显示页面上的第一个跨度，但是第二个不起作用。这里的PHP代码：

echo __("<div class='action' style='margin-bottom: -20px'> 
      <div id='box' style='background-color:". $active_row->color .";width: 10px;height:10px;float:left;margin:5px 10px 0px 10px;'> </div> 
      <span id='myBtn' style='color:orange'> ". $active_row->title ."<span id='GoogleADD' style='float:right; color:orange; text-decoration:underline'> Add </span> </span> <span id='end' style='float:right; margin-right: 10px'>". $endDateString ."</span> <span style='float:right'> - </span> <span id='start' style='float:right; margin-left:10px'> ". $newDateString ." </div> <!-- Trigger/Open The Modal --> 

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

       <!-- Modal content --> 
       <div class='modal-content'> 
       <div class='modal-header'> 
        <span class='close'>×</span> 
        <h2 style='text-align:center'>Podrobnosti o akci</h2> 
       </div> 
       <div class='modal-body'> 
        <p> Název akce: <b>". $active_row->title ."</b> </p> 
        <p> Podrobnosti: <b>". $active_row->description ." </b> </p> 
        <p> Začátek akce: <b>". $newDateString ." </b> </p> 
        <p> Konec akce: <b>". $endDateString ." </b> </p> 
        <p> Přidat akci do vašeho Google Kalendáře: <b style='color: orange; text-decoration: underline'> ADD ME! </b> </p> 
       </div> 
       <div class='modal-footer'></div> 
       </div> 
      </div>"); 

然后我有一个脚本，在那里我想显示他们，当有人点击它们。我在这里检查“第三”行的标识（span id =“myBtn”）。

这是我的jQuery脚本。

<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'; 
    } 
} 


    </script>" 

你能帮我一下吗？非常感谢！

Answer 1

我认为这会帮助你实现你的目标。我已经从您的示例中删除了一些不需要的细节，并尽量保持它尽可能简单。

<div class='action' > 
    <span class="MyBtn" rel="myModal1" style='color:orange'>Title 1</span> 
</div> 
<!-- The Modal 1 --> 
<div id='myModal1' class='modal' style="display:none"> 
    <!-- Modal content 1 --> 
    <div class='modal-content'> 
     <div class='modal-header'> 
      <span class='close' rel="myModal1" >X</span> 
      <h2 style='text-align:center'>Popup 1 header</h2> 
     </div> 
     <div class='modal-body'>'Popup 1 content goes here...'</div> 
     <div class='modal-footer'></div> 
    </div> 
</div> 



<div class='action' > 
    <span class="MyBtn" rel="myModal2" style='color:orange'>Title 2</span> 
</div> 
<!-- The Modal 2 --> 
<div id='myModal2' class='modal' style="display:none"> 
    <!-- Modal content 2--> 
    <div class='modal-content'> 
     <div class='modal-header'> 
      <span class='close' rel="myModal2" >X</span> 
      <h2 style='text-align:center'>Popup 2 header</h2> 
     </div> 
     <div class='modal-body'>'Popup 2 content goes here...'</div> 
     <div class='modal-footer'></div> 
    </div> 
</div> 

上面的html部分可以在任何循环结构的帮助下生成。请注意，我已经在两个不同的地方将模式容器的ID写入 rel属性。

1. 在范围内标记与MyBtn类。
2. 在范围内标记与关闭类。

您需要为您的模式cotainer生成唯一的ID，也应该写在那里。 （你可以使用$ active_row-> ID，编号为ins）

这里是脚本，它将打开和关闭模式框。

<script type="text/javascript"> 
    var button_click = function() { 
     var ModalID = this.getAttribute("rel"); 
     document.getElementById(ModalID).style.display = 'block'; 
    }; 

    var close_click = function() { 
     var ModalID = this.getAttribute("rel"); 
     document.getElementById(ModalID).style.display = 'none'; 
    }; 


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

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

    // Assign the events to the buttons (open & close) 
    for(iCount = 0; iCount < btn.length; iCount++) { 
     btn[iCount].addEventListener('click', button_click, false) ; 
     close[iCount].addEventListener('click', close_click, false) ; 
    } 
</script> 

我希望它会有所帮助。

玩得很开心。