如何在循环中运行脚本弹出模式？

所以我有这个弹出模式：

HTML：

<h2>Modal Example</h2>

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

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

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

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

我试着在每个帖子中加入一个for循环。

它可以在第一篇帖子上运行，但不会为其他帖子弹出。

我试着把脚本放到循环之外，同样的事情。。为第一篇文章工作，但不为其他人工作。

我认为冲突在于名字。

是否有可能在每个帖子中循环使用此功能？

任何帮助都将不胜感激。

EDIT: 我试图添加<?php $postid = get_the_ID(); echo $postid; ?> 这样我就可以为循环中的每个事件提供唯一的id。

但这并不奏效（即使是第一篇帖子）。

我猜php并没有在某些脚本部分执行。

我真的需要帮助，我该如何解决这个问题？

<a href="#openModal<?php $postid = get_the_ID(); echo $postid; ?>">Open Modal</a> <div id="openModal<?php $postid = get_the_ID(); echo $postid; ?>" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Popup</h2> <p>Isto é uma popup toda bonitinha a funcionar apenas com CSS3.</p> </div> </div>

.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity: 1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }

小码农CODE

相关推荐

在wp_en队列脚本后添加内联JavaScript