Question

如何减少呼叫模态窗口？

$('#button-1').on('click', function() {
    $('#modal-1').addClass('j-modal--open');
});

$('#button-2').on('click', function() {
   $('#modal-2').addClass('j-modal--open');
});

例如：

var modal__id = $('a[href^="#j-form"]').val();

$('a[href^="#j-form"]').on('click', function() {
    $(modal__id).addClass('j-modal--open');
})

如果将href的内容转换为变量并通过单击链接输入，则id为同名且包含类j-modal - open

这是您点击：

的时候

<a href="#j-form__id">Click</a>

已打开的窗口：

<div id="j-form__id">Modal content</div>

Answer 1

您可以通过在触发模态的所有a元素上放置一个公共类来实现此目的。然后，您可以阅读所有href的点击处理程序中的a，然后打开相应的模式。试试这个：

<a href="#j-form__id" class="modal-trigger">Click</a>
<a href="#foo" class="modal-trigger">Click</a>

$('.modal-trigger').click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    $(target).addClass('j-modal--open');
});

Answer 2

这实际上非常简单。您需要做的就是从单击的元素中读取href值并获取链接的哈希部分。以下是您的代码中的一个工作示例。

首先，我们从定义链接开始。我们将modal-link类添加到每个锚标记中，以便我们知道它们应该触发模态。

<a href="#form-id" class="modal-link">Open Modal 1</a>
<a href="#another-form-id" class="modal-link">Open Modal 2</a>

现在，我们运行jQuery选择器将click事件添加到页面上的所有匹配元素。

$('a.modal-link').on('click', function() {
    var href = this.href;
    var hashIndex = this.href.indexOf('#');

    if (hashIndex == -1) return false; // Could not find the # symbol that separates our ID

    // Get the ID selector from the URL (includes the # symbol)
    var id = href.substring(hashIndex);
    // Find our modal and add the requested class
    $(id).addClass('j-modal--open');

    // Prevent default action of this link
    return false;
});

模态基数为[href ^ =“＃id”]

2 个答案: