Призрак CSS - Открытие модального на основе значения идентификатора - PullRequest
Новая
       25

Призрак CSS - Открытие модального на основе значения идентификатора

0 голосов
/ 07 декабря 2018

Для этого вопроса я буду использовать Призрачный CSS-фреймворк .

В настоящее время у меня есть следующий модальный код, но я планирую иметь несколько кодов на странице: 

<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 для нацеливания на открытие определенных модалов?

1 Ответ

0 голосов
/ 07 декабря 2018

Я использовал следующие две функции 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();
});

Это работает со следующим HTML для использования с Spectre CSS: 

<!-- 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>
...