Fire onshow event on all modals

Hello!

I have 30 modals on a page (each one is completelly different) however when I initiallize each modal using $("#modal_id").modal(( "setting", { closable:false;...})) on page load, the “mouse hangs” for as long as 500 to 1000ms. Also, using Google PageSpeed Insights, when I remove the initiallization of modals on pageload it gets saved 12 points on the final score, so clearly initiallizing that much modals impacts user experience.

So I ask you: is it possible to attach some kind of event to ONLY initiate the modals when the .modal("show") is called for the first time on each modal?

Cause I have hundreds of .modal("show") calls all over the place on my pages. Wheter a user clicks on a button, on a link, hover a image, scrolls past at certain point on a page… Those .modal("show") calls are all over the place and it would too tedious/labour intensive to change every single .modal("show") to something like

if (typeof initiated_modal_23 === "undefined") {
    
    initiated_modal_23  = true;
    $("#modal_id").modal(( "setting", { closable:false;...}));

}

$("#modal_id").modal("show");

For some reasom initializing modals with many content inside affects heavily page load. So it would be nice to know if there is some way to solve this problem.

OBS: I could defer the initialization of modals after 3 seconds (for example) from page load but if any .modal("show") gets executed before the initialization problems will happen, as you expect.

[lubber-de]

@batata004 You could change the global settings after showing the first modal. Ugly, but works

http://jsfiddle.net/hnx3r4wu/

[ColinFrick]

@batata004 this works for me: https://jsfiddle.net/5ewq4tdy/ What’s important is that you have to set the onShow before any modal is initialized.