多种模态 [英] Multiple modals

问题描述

我正在尝试向页面添加多个模式窗口，但是在此方面并不能很好地进行管理.目前，我正在使用下面的代码，因此我需要对其进行修改，以使其也可用于多种模式.

I'm trying to add multiple modal windows to my page, but don't manage very well at it. Currently I'm using code below and I would need to modify it to be usable with multiple modals as well.

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');
});

推荐答案

如果您在一页上使用多个模式，我会这样做:

If you're using multiple modals on one page I would do something like this:

如果您有要触发特定模态的.btn，请在其中添加data-attr，如下所示:

where ever you have a .btn you want to trigger a specific modal, add a data-attr to it like so:

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

或

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

，对于每种模式，我可能会在html中添加相同的id:

and I would add maybe an id of the same to the html for each modal:

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

您应该在点击时拉出该类型，并使用它来触发适当的模式:

You should pull that type on click and use it to trigger the proper modal:

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

这样，您可以更详细地了解要触发的模式.

That way you're more specific about the modal you are triggering.

示例字段

但是，老实说，更有效的方法是我使用ajax在单击时动态加载带有相应信息的单独文件.这样，您将只有一个模式脚本并交换信息.

To be honest though, the more efficient way of doing this is my using ajax to dynamically load a separate file with the corresponding info when you click. That way you would have just one modal script and swap out the info.

更新

这是我基于您的codePen的意思:

This is what I mean based off of your codePen:

CODEPEN

这篇关于多种模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！