CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui-dialog
Nicola Bertelloni
Nicola Bertelloni

Reputation: 333

List of multiple dialog box

I need to write a jQuery function to make different buttons open different dialog boxes, each link as a single dialog.

How can I insert a variable in the html to link each button to his dialog without writing a function for each one?

I have the single dialog function and I need to apply this to multiple solutions

$(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');
    });
});

I think that the best way could be add a data-XXX, but how can I manage it in the jQuery function?

Upvotes: 0

Views: 381

Answers (1)

Vanojx1
Vanojx1

Reputation: 5574

use this

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

add that id to your dialogs then (don't know what #over is but you can use the same logic):

$('.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');
  });

Upvotes: 1

Related Questions