humaan / Modaal

An accessible dialog window library for all humans.
http://humaan.com/modaal/
MIT License
2.72k stars 183 forks source link

Multiple instances of modaal issue #134

Open yosypandriyash opened 3 years ago

yosypandriyash commented 3 years ago

When I create more than a single Modaal instances, something goes wrong. When I close the second or the third instance with X close button, the previous modaal not works, I can't close it, when i do console.log(self.scope.id) it show always the last created modaal id and it no change. Thanks!

MikeiLL commented 3 years ago

You should probably share your code.

yosypandriyash commented 3 years ago

I had to change the library to generate the modals because I was in a hurry to finish the project, however it is as simple as declaring two different instances of modaal. Something like:

$ ('. my-first-selector'). modaal ({args}); $ ('. my-second-selector'). modaal ({args});

The error occurs when I open the modal $ ('. my-first-modal') and then, without closing the first one, I open the modal $ ('. my-second-modal');

It allows me to close the last one but afterwards the first one cannot be closed anymore. Thanks!!

graemebryson commented 3 years ago

I'm experiencing the same issue — I have a global modal, in which there's a link to launch a second (video) modal on top. I can close the video modal, but the original modal then fails to close at all and I need to refresh.

I've tried forcing it via callbacks on the second modal, but it ends up launching multiple instances of the first.

// Initialize first modal
// --------------------------------------------------

jQuery(function($){
    $('.trigger__modal--first').modaal({
        custom_class: 'modal--first'
    });
});

// Initialize second modal
// --------------------------------------------------

jQuery(function($){
    $('.trigger__modal--second').modaal({
        custom_class: 'modal--second',
        type: 'video',
        after_open: function() {
            $('.trigger__modal--first').modaal('close');
        },
        after_close: function() {
            $('.trigger__modal--first').modaal('open');
        }
    });
});