Bootstrap adding multiple modal dialog boxes support

Because the project needs, in the page interaction to pop up multiple dialog windows, and bootstrap modal support pop-up dialog window, but if on this basis, there will be more matte layer, the background is getting darker.

The code is specific as follows: (function () {modal = {};modal.opendialog = function (URL, title, width, height, id) {};modal.closedialog = function ( ID) {};window.modal = modal;}) (); The ID is passed in the OpenDialog function, that is, the id,url of the dialog div that is about to be generated is the src of the iframe in dialog,The ID will also be written in the parameter option of the modal function.   When multiple dialog are called, different IDs need to be passed in, source code backdrop:function (callback) {        var that = this    &N Bsp     animate = this. $element. Hasclass (' fade ')? ' Fade ': '          if (This.isshown && this.options.backdrop) {      &NBS P   var doanimate = $.support.transition && animate           this. $backdrop = $ ( ")             AppendTo (document.body)            this $BACKD Rop.click (            This.options.backdrop = = ' static '?              $.proxy (this. $element [0].focus, this. $element [0])            : $.proxy ( This.hide, this)          )            if (doanimate) this. $backdrop [0].offsetwidth//Force reflow           this. $backdrop. addclass (' in ')            if (!callback) return           DoAn Imate?            This $backdrop one ($.support.transition.end, callback):    &N Bsp       Callback ()         } else if (!this.isshown && this. $backdrop) {&nbs P         this. $backdrop. Removeclass (' in ')            $. Support.transition && this. $element. Hasclass (' fade ')?            this.$ Backdrop.one ($.support.transition.end, callback):            callback ()         } else if (callback) {          callback ()        }&NBSP ;    } functionThis . $backdrop = $ ("). AppendTo (Document.body) is the addition of a mask layer. The mask layer is implemented to add after the body, and the z-index of the DIV is set to 99999; our next implementation is also with Z-index, considering a layer of online overlay z-index, mask layer only one can, The different dialog can only be higher than the z-index of the mask layer. Just add a mask layer when the first dialog is open, and the rest of the z-index in the style of the mask layer. Add Class object in Modal class code, Modal.ids = []; When you add a mask layer, thevar doanimate = $.support.transition && animate this line of code after the ID is push, and then to determine the number of dialogdialogID = option.id; Modal.ids.push (ID), if (modal.ids.length==1) {This . $backdrop = $ (" ). AppendTo (document.body); $ ("#" +id). attr ("style", "z-index:100000!important"); }else{var Perviouszindex =$(". Modal-backdrop"). CSS (" Z-index "); This . $backdrop = $ (". Modal-backdrop"). attr (" style ","Z-index: "+ (perviouszindex+2) +"!important"); $ ("#" +id). attr ("style", "Z-index:" + (perviouszindex+3) + "!important"); When closed, the z-index of the mask layer needs to be recalculated, dialog is hidden, because when it is opened again several times, the action on the matte layer is removebackdrop:function () {this. $backdrop &A        mp;& this. $backdrop. Remove () The $backdrop = null} function, overwriting the function removebackdrop:function () {if (modal.ids==1)        this. $backdrop && $backdrop. Remove (); this. $backdrop = null;Modal.ids.shift ();}else{This . $backdrop. attr ("style", "Z-index:" + (perviouszIndex-2) + "!important"); Modal.ids.shift ();}

Bootstrap adding multiple modal dialog boxes support