javascript - 多种模式

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">

我可能会为每个模态添加一个相同的 id 到 html 中:

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

您应该在点击时拉动该类型并使用它来触发正确的模式:

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

这样你就可以更具体地了解你正在触发的模式。

SAMPLE FIDDLE

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

更新

这就是我根据您的 codePen 的意思:

CODEPEN