jquery - Spectre CSS - 根据 id 值打开模式

Question

对于这个问题，我将使用 Spectre CSS framework .

我目前有以下模式代码，但计划在页面中有多个:

<div class="modal modal-lg" id="myModalId">
    <a href="#close" class="modal-overlay" aria-label="Close"></a>
    <div class="modal-container">
        <div class="modal-header">
            <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
            <div class="modal-title h5">My Title</div>
        </div>
        <div class="modal-body">
            <div class="content">
                <!-- content here -->
            </div>
        </div>
        <div class="modal-footer">
            ...
        </div>
    </div>
</div>

目前，为了打开模态，我使用特定的按钮调用来添加 active 类(从文档中打开模态。

To make a modal appear, add the active class to the modal container.

但这是处理 20 多个模态的一种非常低效的方法。我如何使用 jQuery 来定位要打开的特定模式？

Answer 1

我使用以下两个 jQuery 函数来打开和关闭模式:

$(document).delegate('.modal-toggle', 'click', function(e) {
    var modal = $(this).attr('data-modal');

    $(modal).addClass('active');

    e.preventDefault();
});

$(document).delegate('.modal-close', 'click', function(e) {
    $(this).closest('.modal').removeClass('active');
    e.preventDefault();
});

这适用于以下用于 Spectre CSS 的 HTML:

<!-- Button -->
<button class="btn btn-primary modal-toggle" data-modal="#myModalId">Open Modal</button>

<!-- Modal -->
<div class="modal" id="myModalId">
    <a class="modal-overlay modal-close" aria-label="Close"></a>
    <div class="modal-container">
        <div class="modal-header">
            <a class="btn btn-clear close-modal float-right modal-close" aria-label="Close"></a>
            <div class="modal-title h5">My Title</div>
        </div>
        <div class="modal-body">
            <div class="content">
                ...
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>