多个对话框列表

List of multiple dialog box

本文关键字：列表 对话框      更新时间：2023-09-26

我需要写一个jQuery函数，使不同的按钮打开不同的对话框，每个链接作为一个单独的对话框。

我如何在html中插入一个变量，将每个按钮链接到他的对话框，而不为每个按钮编写函数?

我有一个对话框功能，我需要将其应用于多个解决方案

$(document).ready(function () {
    $('.prova').click(function () {
        $('.wrap-dialog-contact')
                .addClass('show-dialog')
                .removeClass('hide-dialog');
        $('.dialog-overlay')
                .toggleClass('dialog-overlay-on')
                .removeClass('overoverlay-disappear')
                .addClass('overlay-appear');
        $('.dialog-contact-content')
                .addClass('dialog-enter');
        $('.dialog-contact-content')
                .removeClass('dialog-exit');
        $('#over')
                .addClass('blur');
    });
});
$(document).ready(function () {
    $('.dialog-overlay, .input-contact-close').click(function () {
        $('.wrap-dialog-contact')
                .removeClass('show-dialog')
                .addClass('hide-dialog');
        $('.dialog-overlay')
                .toggleClass('dialog-overlay-on')
                .removeClass('overoverlay-appear')
                .addClass('overlay-disappear');
        $('.dialog-contact-content')
                .removeClass('dialog-enter')
                .addClass('dialog-exit');
        $('#over')
                .removeClass('blur');
    });
});

我认为最好的方法是添加一个data-XXX，但是我如何在jQuery函数中管理它?

使用

<a class="prova" dialogId="dialog1">Dialog1</a>
<a class="prova" dialogId="dialog2">Dialog2</a>

将id添加到你的对话框中(不知道#over是什么，但你可以使用相同的逻辑):

$('.prova').click(function(){
    var dialogId = $(this).attr("dialogId");
    $('#'+dialogId+' > .wrap-dialog-contact').addClass('show-dialog').removeClass('hide-dialog');
    $('#'+dialogId+' > .dialog-overlay').toggleClass('dialog-overlay-on').removeClass('overoverlay-disappear').addClass('overlay-appear');        $('#'+dialogId+' > .dialog-contact-content').addClass('dialog-enter');
    $('#'+dialogId+' > .dialog-contact-content').removeClass('dialog-exit');
    $('#over').addClass('blur');
  });
相关文章：