JavaScript - 显示弹出窗口

Question

我正在尝试根据随机生成的 id 显示不同的弹出窗口。我使用的代码如下(这是使用 WordPress 中的工具集类型完成的):

    <div class="id-select" id="[random_number]">
    <div class="service-container">
        <div class="service-image">
            [types field="picture"][/types]
        </div>
        <div class="service-text">
            <p><strong>Item:</strong> [wpv-post-title output="sanitize"]</p>
            <p><strong>Suitable For:</strong> [wpv-post-taxonomy type="memorial-category" format="name"]</p>
            <p><strong>Price:</strong> [types field="price"][/types]</p>
        </div>
    </div>
</div>
<!-- The Modal -->
<div id="myModal-custom" class="modal-custom">

    <!-- Modal content -->
    <div class="modal-content-custom">
        <span class="close-custom">×</span>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                  <div class="service-image">
                    [types field="picture"][/types]
                  </div>
                </div>
                <div class="col-md-6">
                    <div class="service-text">
                        <p><strong>Item:</strong> [wpv-post-title output="sanitize"]</p>
                        <p><strong>Suitable For:</strong> [wpv-post-taxonomy type="memorial-category" format="name"]</p>
                        <p><strong>Price:</strong> [types field="price"][/types]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

JavaScript 如下:

// Get the modal
var modal = document.getElementById('myModal-custom');
// Get the button that opens the modal
      var ids = [];
      $('.id-select').each(function(i, el) {
        if (el.id == '') {
          return;
        }
        ids.push('#' + el.id);
      });
      //console.log(ids.join(','));

      $(ids.join(',')).on('click', function(e) {
        modal.style.display = "block";
      })
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-custom")[0];
// 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";
  }
}

我遇到的问题是，我在前端单击的任何项目都会显示相同的模式框。无论如何，我可以让它为特定项目选取正确的模式框吗？

实时网站 - http://79.170.40.172/tc-pinkfin.co.uk/memorials/cemetery/

Answer 1

当你无论如何都不在 getter 中参数化模态时，你会期望模态有何不同？

var modal = document.getElementById('myModal-custom');

你总是要求相同的模态，所以它总是相同的。

您的页面上有更多模态吗？

您是否以某种方式将不同的数据传递给该模式但它没有显示？

在您的页面上，我看到您显示带有图像和一些附加数据的框。猜猜你在一些数组中有这些图像+数据，例如:

const items = [
   { imgSrc: "...", additionalData:{...} },
   { imgSrc: "...", additionalData:{...} },
   { imgSrc: "...", additionalData:{...} },
];

通常您需要做的是将模态与每个item(来自上面的数组)关联起来

执行此操作的最佳时机是当您创建页面上已有的框并想要单击以显示模式时(您在循环中执行此操作，对吗？)。

可能的解决方案:

• 创建每个框时，您可以将点击处理程序附加到它，指向特定的模式实例。
• 使用唯一的 ID 扩展每个 item 对象，并以某种方式将该 ID 添加到每个项目的正确模态 DOM 元素中。前任。 data-modaluid="$uniqueIDFromItem"比点击每个项目时，使用该 ID 绑定(bind) click 方法(也可以设置为 data-itemuid=$uniqueIDFromItem 或仅绑定(bind)在点击处理程序中)，并通过该 ID 搜索正确的模式 DOM 节点。

有几种方法可以做到这一点，具体取决于您构建页面的方式以及处理数据的方式。

HTML

<button>toggle modal 1</button>
<button>toggle modal 2</button>
<button>toggle modal 3</button>

<div class="modal">
  modal 1
</div>
<div class="modal">
  modal 2
</div>
<div class="modal">
  modal 3
</div>

Javascript

总体思路是通过唯一的 id (uid) 将每个可点击的项目与模型连接起来。

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

document.addEventListener("DOMContentLoaded", () => {
  const modals = document.querySelectorAll(".modal")
  const buttons = document.querySelectorAll("button")

  let guids = []

  //create unique IDs for modals/buttons
  buttons.forEach(button => {
    guids.push(guid())
  })

  //set those IDs for buttons/modals with same order in array. Creating connections  1->1 2->2 3->3
  guids.forEach((guid, index) => {
    buttons[index].dataset.guid = guid
    modals[index].dataset.guid = guid
  })

  //add onClick event listener for each button
  buttons.forEach(button => {
    button.addEventListener("click", (e) => {
       //find proper div modal with same ID as clicked button
       const divModal = document.querySelector(`div[data-guid="${e.target.dataset.guid}"]`)
       //change its style when not visible assign "visible", otherwise assign "hidden"
       divModal.style.visibility = divModal.style.visibility !== "visible" ? "visible" : "hidden";
    })
  })
})

代码笔:

https://codepen.io/anon/pen/GXzOJv?editors=1011

制作人员

GUID 方法来自此处:Create GUID / UUID in JavaScript?