Question

我正在尝试创建一个包含多个模态的页面但是对于每个模态我创建一个带有onclick()附加功能的按钮来打开它们。

有没有办法可以编写一个函数，然后根据按钮所在的容器打开页面上的任何模态？

以下是我的示例代码。

  <div>
      <button type="button" onclick="showModal1()">Open Modal</button>
      <div id="overlay"></div>
      <div class="modal" id="modal1">
          <span class="close" onclick="hideModal1()"></span>
          <p>modal content</p>
   </div>
   </div>

<div>
    <button type="button" onclick="showModal2()">Open Modal</button>
    <div id="overlay"></div>
    <div class="modal" id="modal2">
        <span class="close" onclick="hideModal2()"></span>
        <p>modal content</p>
    </div>
</div>

JS

function showModal1() {
    document.getElementById("modal1").style.display = "block",
    document.getElementById("overlay").style.display = "block"
}
function hideModal1() {
    document.getElementById("modal1").style.display = "none",
    document.getElementById("overlay").style.display = "none"
}
function showModal2() {
    document.getElementById("modal2").style.display = "block",
    document.getElementById("overlay").style.display = "block"
}
function hideModal2() {
    document.getElementById("modal2").style.display = "none",
    document.getElementById("overlay").style.display = "none"
}

Answer 1

这是一种方式。

<button type="button" onclick="showModal(1)">Open Modal</button>
<div id="overlay"></div>
<div class="modal" id="modal1">
    <span class="close" onclick="hideModal(1)"></span>
    <p>modal content</p>
</div>

<button type="button" onclick="showModal(2)">Open Modal</button>
<div id="overlay"></div>
<div class="modal" id="modal2">
    <span class="close" onclick="hideModal(2)"></span>
    <p>modal content</p>
</div>

JS

function showModal(modal_no) {
    document.getElementById("modal"+modal_no).style.display = "block",
    document.getElementById("overlay").style.display = "block"
}
function hideModal(modal_no) {
    document.getElementById("modal"+modal_no).style.display = "none",
    document.getElementById("overlay").style.display = "none"
}

Answer 2

如果您能够使用jQuery，则可以将事件处理程序绑定到＆＃34;单击＆＃34;使用.click()方法的JavaScript元素，您可以使用.siblings()和.parent()（以及其他）查找附近的元素。这样，您只需要为每个模态开始类和模态关闭类定义一个绑定，并使用它们的上下文来确定要打开和关闭的模态。请注意，$(this)会捕获所点击的特定元素。

＆＃13;

$(function() {
  $('.modal-open').click(function() {
    $(this).siblings('.modal').add('#overlay').show();
  });

  $('.modal-close').click(function() {
    $(this).parent('.modal').add('#overlay').hide();
  });
});

＆＃13;

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 100;
  background: #fff;
  min-width: 300px;
  padding: 10px;
}
.modal-close {
  cursor: pointer;
  float: right;
}
#overlay {
  opacity: 0.4;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display:none" id="overlay"></div>

<div>
  <button class="modal-open">Open Modal #1</button>
  <div style="display:none" class="modal">
    <span class="modal-close">x</span>
    <p>Modal #1 content</p>
  </div>
</div>

<div>
  <button class="modal-open">Open Modal #2</button>
  <div style="display:none" class="modal">
    <span class="modal-close">x</span>
    <p>Modal #2 content</p>
  </div>
</div>

＆＃13;

注意：为了让.siblings('.modal')在这里正常工作，按钮和模式应该放在他们自己的<div>元素中，否则你冒着按钮的风险可能是带有modal类的两个元素的兄弟姐妹。

您也可以使用.addEventListener使用vanilla JavaScript执行此操作。当然，你必须以不同的方式获得兄弟姐妹和父母元素。

Answer 3

首先，在所有按钮上放置一些类;让我们说modal__trigger。然后为每个人分配一些动态数据属性;让我们说，例如，

<button class="modal__trigger" data-modal="modal--id">Button</button>

现在，对于每个模态，分配一个匹配的ID：

<div class="modal" id="modal--id">Content</div>

现在，你需要做的就是为你想要的任何事件添加听众，比如打开，关闭等等。

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', open.bind(buttons[i]))
}

function open() {
    let id = this.getAttribute('data-modal')
    let modal = document.getElementById(id)
    modal.classList.add('modal--visible')
}

function close() {
    (however you want to close the modal, using the same sort of logic)
}

这是一个非常简化的版本，可以在基本情况下使用。如果您希望我链接到它，我会为我们的内部团队编写一个更复杂的库，但在这种情况下，我根本不知道它是否有必要。

Answer 4

这是一个简单的例子，它只使用一个函数来完成你的要求。当然，人们可以（并且应该）尝试使其更加通用，就像他的答案中的子目标所做的那样，摆脱＆＃34; onclick＆＃34;分离HTML和脚本。

＆＃13;

function showModal(modalId) {
document.getElementById("modal" + modalId).style.display = "block",
document.getElementById("overlay").style.display = "block"
}
function hideModal(modalId) {
document.getElementById("modal" + modalId).style.display = "none",
document.getElementById("overlay").style.display = "none"
}

＆＃13;

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 100;
  background: #fff;
  min-width: 300px;
  padding: 10px;
  }

.modal .close {
  cursor: pointer;
  float: right;
}

#overlay {
  display: none;
  opacity: 0.4;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

＆＃13;

<div id="overlay"></div>

<button type="button" onclick="showModal(1)">Open Modal</button>
<div class="modal" id="modal1">
<span class="close" onclick="hideModal(1)">X</span>
<p>modal content</p>
</div>

<button type="button" onclick="showModal(2)">Open Modal</button>
<div class="modal" id="modal2">
<span class="close" onclick="hideModal(2)">X</span>
<p>modal content</p>
</div>

＆＃13;

我正在尝试为一个可以在javascript中打开多个模态的按钮编写一个函数

4 个答案: