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 += "-";
			$(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 id="'+pid+'-content" class="modal-body mabody">'+
				    '<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>'+

2. Bullet window button binding,

//Initialize prompt content, bind pop-up control
		var initContentBindButton = function(){
			//Initialize prompt content
			if(content === undefined || content === null){
				content = "";
			//Initialize Button Event
			//OK button
				_CONST.alertClickFlag = '0';
			//Window x Close Button
				_CONST.alertClickFlag = '1';
			//close button
				_CONST.alertClickFlag = '1';
			//Hide Window Events
			getDom.bMsgAlert().on('', function(event) {
				//Remove dom
				if(_CONST.alertClickFlag === '0'){
					if(scb&&typeof(scb) === 'function'){
				}else if(_CONST.alertClickFlag === '1'){
					if(ccb&&typeof(ccb) === 'function'){

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:

The improvement is to add one more attribute after traversal as a hierarchical distinction:

//Traversal Sort Modal Box Differentiate Modal Box Layers with layer
        $('').each(function(index) {
            var $modal = $(this);
            var layer = $modal.attr('layer');
            if(!layer||layer === undefined){
            	 $modal.attr('layer', $('').length);
            $modal.css('zIndex', modalZIndex+(parseFloat($modal.attr('layer'))));

//Traversal Sort Modal Box Mask Differentiate Modal Box Layers with layer
        $('').each(function(index) {
        	$modalbackdrop = $(this);
        	var layer = $modalbackdrop.attr('layer');
        	if(!layer||layer === undefined){
           		$modalbackdrop.attr('layer', $('').length-1);
        	$modalbackdrop.addClass('hidden').css('zIndex', modalZIndex+(parseFloat($modalbackdrop.attr('layer'))));
        	if(index === $('').length-1){

Finally, an example is attached:

Tags: Attribute

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