It's painful to have been developing front-end with bootstrap lately.
Developing entangled in not having a public standard pop-up window, so you can only write one yourself (not very good at it.)When you make a wheel for the first time, you don't know if it's a wheel)
Here is the code:
1. Initialize the modal box dom using a timestamp as the modal box id.Used to distinguish between multiple pop-ups
//Initialize Modal Box var initWinModal = function(){ //Add a timestamp random number id to differentiate the modal box IDS so that multiple modal prompt boxes can be called at the same time pid += "-"+Date.now().toString(16); $(document.body).append('<div id="'+pid+'" aria-hidden="true" data-backdrop="static"></div>'); $("#"+pid).append('<div id="'+pid+'-body">'+ '<div>'+ '<div>'+ '<a id="'+pid+'-WinClose" data-dismiss="modal">'+_CONST.ualertContent.closeBtn+'</a>'+ '<h3>'+_CONST.ualertContent.title+'</h3>'+ '</div>'+ '<div id="'+pid+'-content">'+ '</div>'+ '<div>'+ '<a id="'+pid+'-bSure" data-toggle="modal" data-dismiss="modal">'+_CONST.ualertContent.sureCn+'</a>'+ '<a id="'+pid+'-bClose" href="#" data-dismiss="modal">'+_CONST.ualertContent.closeCn+'</a>'+ '</div>'+ ' </div>'+ '</div>'); initDomVar(); initContentBindButton(); };
2. Bullet window button binding,
//Initialize prompt content, bind pop-up control var initContentBindButton = function(){ //Initialize prompt content if(content === undefined || content === null){ content = ""; } getDom.bmaContent().html("<p>"+content+"</p>"); //Initialize Button Event //OK button getDom.bmaButtonSure().unbind('click'); getDom.bmaButtonSure().on('click',function(){ _CONST.alertClickFlag = '0'; }); //Window x Close Button getDom.bmaButtonWinClose().unbind('click'); getDom.bmaButtonWinClose().on('click',function(){ _CONST.alertClickFlag = '1'; }); //close button getDom.bmaButtonClose().unbind('click'); getDom.bmaButtonClose().on('click',function(){ _CONST.alertClickFlag = '1'; }); //Hide Window Events getDom.bMsgAlert().off('hidden.bs.modal'); getDom.bMsgAlert().on('hidden.bs.modal', function(event) { //Remove dom getDom.bMsgAlert().remove(); if(_CONST.alertClickFlag === '0'){ if(scb&&typeof(scb) === 'function'){ scb(); } }else if(_CONST.alertClickFlag === '1'){ if(ccb&&typeof(ccb) === 'function'){ ccb(); } } }); };
Finally, the pop-up window rendering
Previously, I encountered the problem of multi-layer nesting of modal boxes, and found the way of God on the Internet.Then I made some improvements myself (paste the original address again: http://blog.csdn.net/k358971707/article/details/71908862)
The improvement is to add one more attribute after traversal as a hierarchical distinction:
//Traversal Sort Modal Box Differentiate Modal Box Layers with layer $('.modal.in').each(function(index) { var $modal = $(this); var layer = $modal.attr('layer'); if(!layer||layer === undefined){ $modal.attr('layer', $('.modal.in').length); } $modal.css('zIndex', modalZIndex+(parseFloat($modal.attr('layer')))); });
//Traversal Sort Modal Box Mask Differentiate Modal Box Layers with layer $('.modal-backdrop.in').each(function(index) { $modalbackdrop = $(this); var layer = $modalbackdrop.attr('layer'); if(!layer||layer === undefined){ $modalbackdrop.attr('layer', $('.modal-backdrop.in').length-1); } $modalbackdrop.addClass('hidden').css('zIndex', modalZIndex+(parseFloat($modalbackdrop.attr('layer')))); if(index === $('.modal-backdrop.in').length-1){ $modalbackdrop.removeClass('hidden'); } });
Finally, an example is attached: