Question

我正在尝试向我的页面添加多个模态窗口，但是管理不好。目前我正在使用下面的代码，我需要将其修改为可用于多个模态。

HTML：

<div class="modal">
<div class="overlay"></div>
  <div class="modal--contents modal--transition">
    <a class="modal--close" href="#"><img src="/images/icons/modal/close.png">Close</a>
    <h2>How to install on Windows</h2>
    <div class="instructions">
        <div class="instructions-single">
            <img src="/images/placeholders/step.png" alt="Step 1">
            <h3>Step 1</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="instructions-single">
            <img src="/images/placeholders/step.png" alt="Step 2">
            <h3>Step 2</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="instructions-single">
            <img src="/images/placeholders/step.png" alt="Step 3">
            <h3>Step 3</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
    </div>
  </div>
</div>

<a href="javascript:void(0)" class="overlay--trigger btn"><img src="/images/icons/download/help_icon.png" alt="Help">How to install</a>

JS：

var modal = $('.modal');

$( ".btn" ).on( "click", function() {
  $( modal ).toggleClass('modal--show');
});

$( ".overlay" ).on( "click", function() {
  $( modal ).toggleClass('modal--show');
});

$( ".modal--close" ).on( "click", function() {
  $( modal ).toggleClass('modal--show');
});

Answer 1

如果您在一个页面上使用多个模态，我会执行以下操作：

如果您想要触发特定模式的.btn，请像这样添加data-attr：

<div class="btn" data-modal-type="type1">

或

<div class="btn" data-modal-type="type2">

我可能会为每个模态的html添加id相同的内容：

<div class="modal" id="type1">

您应该在点击时拉出该类型并使用它来触发正确的模态：

$(".btn").click(function(){
   var Type = $(this).data("modal-type");
   $("#"+Type).toggleClass('modal--show');
});

通过这种方式，您可以更加具体地了解您触发的模态。

SAMPLE FIDDLE

说实话，更有效的方法是使用ajax在您单击时动态加载带有相应信息的单独文件。这样你只需要一个模态脚本并交换信息。

<强>更新

这就是我的意思，基于您的codePen：

CODEPEN

Answer 2

而不是$(modal)到处使用modal.

var modal = $('.modal');
 $( ".btn" ).on( "click", function() {
 modal.toggleClass('modal--show');
});

$( ".overlay" ).on( "click", function() {
  modal.toggleClass('modal--show');
});

$( ".modal--close" ).on( "click", function() {
  modal.toggleClass('modal--show');
});

多种模态

2 个答案: