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类（从文档中打开类。

要显示模式，请将活动类添加到模式容器中。

但是，这是处理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>

Spectre CSS-基于id值打开模态

1 个答案: