The implementation of prompt pop-up window based on bootstrap

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+'" class="modal fade bs-example-modal-sm" aria-hidden="true" data-backdrop="static"></div>');
			$("#"+pid).append('<div id="'+pid+'-body" class="modal-dialog modal-sm">'+
				'<div class="modal-content">'+
					'<div class="modal-header">'+
				        '<a id="'+pid+'-WinClose" class="close" data-dismiss="modal">'+_CONST.ualertContent.closeBtn+'</a>'+
				        '<h3 class="mah3">'+_CONST.ualertContent.title+'</h3>'+
				    '</div>'+
				    '<div id="'+pid+'-content" class="modal-body mabody">'+
				    '</div>'+
				    '<div class="modal-footer mafooter">'+
				        '<a id="'+pid+'-bSure" data-toggle="modal"  data-dismiss="modal"  class="btn mabun">'+_CONST.ualertContent.sureCn+'</a>'+
				        '<a id="'+pid+'-bClose" href="#" data-dismiss="modal" class="btn mabun">'+_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:



Tags: Attribute

Posted on Thu, 28 May 2020 12:36:43 -0400 by Magicmarkuk