Question

对不起，我应该更清楚了。我不想同时显示2个模态。我有2个按钮，每个按钮打开一个不同的模态。

我正在使用在Codepen中找到的一些JS来进行模态对话。只要我使用1个模态，一切都像魅力一样。但是，我想在同一页面上使用2种不同的模态。我将如何修改代码以允许多个模态？我已经尝试了从修改代码到复制所有内容以及粘贴/重命名它的所有内容。我所做的一切似乎打破了模式。理想情况下，我喜欢这样的事情：

<div class="modal-overlay1">
  <div class="modal-window1">
    <h1>Welcome to the modal window!</h1>
    <p>This is a pop up that may contain a form or other info</p>
    <button class="close-button">Close popup</button>
</div>

  <div class="modal-overlay2">
  <div class="modal-window2">
    <h1>test</h1>
    <p>test</p>
    <button class="close-button">Close popup</button>
</div>

Codepen链接： http://codepen.io/brouxhaha/pen/veADg

Answer 1

你可以这样做：

http://codepen.io/anon/pen/nDCey

JS：

function Modal(modalEl, overlayEl, handler) {
  this.modal = $(modalEl);
  this.overlay = $(overlayEl);
  this.handler = $(handler);
  this.wWidth = $(window).width();
  this.wHeight = $(window).height();
  this.dHeight = $(document).height();
}
...
$(function(){
  new Modal('#mw1', '#m1', '#ml1').init();
  new Modal('#mw2', '#m2', '#ml2').init();        
});

HTML：

<div class="container">
  <p id="ml1" class="modal-link">Click to open modal1</p>
  <p id="ml2" class="modal-link">Click to open modal2</p>
</div>

<div id="m1" class="modal-overlay">
  <div id="mw1" class="modal-window">
    <h1>Welcome to the modal window!</h1>
    <p>This is a pop up that may contain a form or other info</p>
    <button class="close-button">Close popup</button>
  </div>
</div>

<div id="m2" class="modal-overlay">
  <div id="mw2" class="modal-window">
    <h1>Welcome to the modal window 2!</h1>
    <p>Modal number two</p>
    <button class="close-button">Close popup</button>
  </div>
</div>

我将如何修改此JS以允许多个模态？

1 个答案: