如何从不同的按钮触发相同的弹出窗口？

Question

我正在尝试从菜单中的不同按钮打开此弹出窗口，但是弹出窗口内容将保持不变。

谢谢，Banick

function OpenModalT() {
  var modal = document.getElementById('myModalT');
  modal.style.display = "block";
}

function CloseModalT() {
  var modal = document.getElementById('myModalT');
  modal.style.display = "none";
}

<li>
  <a href="#" onclick="OpenModalT();">Button 1</a>

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

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close" onclick="CloseModalT();">&times;</span>
      <p>
        <ppopup>
          <br>
          <br>
          <strong>Dummy text Dummy text Dummy Text <br><br> Kind Regards
          </strong>
        </ppopup>
      </p>
    </div>
  </div>
</li>

<li>
  <a href="#" onclick="OpenModalT();">Button 2</a>
</li>

Answer 1

你需要以display: none开头。

var modal = document.getElementById('myModalT');

function OpenModalT() {
  modal.style.display = "block";
}

function CloseModalT() {
  modal.style.display = "none";
}

function ModalFunction() {
  if (modal.style.display === "none") {
    modal.style.display = "block";
  } else {
    modal.style.display = "none";
  }
}

/*Add this:*/

#myModalT {
  display: none;
}

<li>
  <a href="#" onclick="ModalFunction();">Button 1</a>

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

    <!-- Modal content -->
    <div class="modal-content">
      <p>
        <ppopup>
          <br>
          <br>
          <strong>Dummy text Dummy text Dummy Text <br><br> Kind Regards
          </strong>
          <span class="close" onclick="ModalFunction();">&times;</span>
        </ppopup>
      </p>
    </div>
  </div>
</li>

<li>
  <a href="#" onclick="ModalFunction();">Button 2</a>
</li>

添加了一些功能：

1. 您可以再次点击关闭
2. 在 javascript 中节省空间

Answer 2

这是一个示例，您可以使用该示例拥有任意数量的模式和按钮：

• 使用具有唯一 ID 的模式
• 使用<button type="button" data-modal="#some-modal-id"> 切换您的模式

const EL_modals = document.querySelectorAll(".modal");

const toggleModal = (ev) => {
  const EL_btn = ev.currentTarget;
  const EL_modal = document.querySelector(EL_btn.dataset.modal);
  // Close all currently open modals:
  EL_modals.forEach(EL => {
    if (EL !== EL_modal) EL.classList.remove("is-active");
  });
  // Toggle open/close targeted one:
  EL_modal.classList.toggle("is-active");
};

const EL_modalBtns = document.querySelectorAll("[data-modal]");
EL_modalBtns.forEach(EL => EL.addEventListener("click", toggleModal));

/*QuickReset*/ * {margin:0; box-sizing: border-box;}

.modal {
  position: fixed;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  transition: 0.4s;
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,0.1);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.modal.is-active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.modal-content {
  position: relative;
  background: #fff;
  padding: 30px;
  box-shadow: 0 5px 20px -5px rgba(0,0,0,0.3);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

<div id="modal-regards" class="modal">
  <div class="modal-content">
    <button type="button" data-modal="#modal-regards" class="modal-close">&times;</button>
    <p>Dummy text Dummy text Dummy Text<br>Kind Regards</p>
  </div>
</div>

<div id="modal-help" class="modal">
  <div class="modal-content">
    <button type="button" data-modal="#modal-help" class="modal-close">&times;</button>
    <p>If something is not clear,<br>feel free to ask.</p>
  </div>
</div>

<button type="button" data-modal="#modal-regards">Kind regards</button>
<button type="button" data-modal="#modal-regards">Kind regards</button>
<button type="button" data-modal="#modal-help">Ask for help!</button>

另外：

• 避免使用内联 on* 处理程序，就像您希望不使用内联样式属性一样 - JS 和 CSS 应该只在一个地方 - 那是您的文件或标签。
• 使用更好的代码编辑器。 ” 与 " 不太一样 - 这样的编辑器会标记和突出那些小的错别字。
• <ppopup> 是无效的 HTML5 标记。 – Roko C. Buljan 16 分钟前
• 如果您需要按钮，请不要使用<a href="#">。请改用<button type="button">。