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

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