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> 

我希望它會有所幫助。

玩得很開心。