SoFunction
Updated on 2025-04-10

Bootstrap-style plug-in

I wrote a bootstrap-style pop-up plug-in, which has only confirmation boxes and prompt boxes for the time being. Subsequent function extensions, bug modifications and updates.

;(function($){
 //Default parameters var PARAMS;
 var DEFAULTPARAMS = 
     {
      width: 500,
      title: 'Prompt message',
      content: '',
      okbtn: 'Sure',
      cancelbtn: 'Cancel',
      headerBackground: 'info',
      vbackdrop: 'static',  //Default clicking on the mask will not turn off the modal      vkeyboard: true,   //Press esc to close modal      confirmFn: new Object,
      cancelFn: new Object
     };
 $.dialog = {
  confirm: function(params){
   $.(params);
   $.('confirm', function(e){
    if($.isFunction()){
     (e);
    }
   }, 
   function(f){
    if($.isFunction()){
     (f);
    }
   });
  },
  alert: function(params){
   $.(params);
   $.('alert', function(e){
    if($.isFunction()){
     (e);
    }
   }, null);
  },
  Show: function(type, confirmCaller, cancelCaller){
   var html = '<div class="modal fade" >'
      + '<div class="modal-dialog" style="width:'++'px"><div class="modal-content">'
      + '<div class="modal-header header_'++'">'
      + '<a class="close" data-dismiss="modal">×</a>'
      + '<h4 class="modal-title text-center">'++'</h4></div>'
      + '<div class="modal-body text-center body_content">'++'</div>'
      + '<div class="modal-footer">';
   if(type=='confirm'){
    html += '<button class="btn btn-default" >'++'</button>';
   }
   html += '<button class="btn btn-primary" >'++'</button>';
   html += '</div></div></div></div>';
   $('body').append(html);
   $('#tipModal').modal({backdrop:,keyboard:});
   $.(type, confirmCaller, cancelCaller);
  },
  initParmas: function(params){
   if(params!= undefined && params!= null){
    PARAMS = $.extend({}, DEFAULTPARAMS, params);
   }
  },
  setDialogEvent: function(type, confirmCaller, cancelCaller){
   switch(type){
    case 'confirm':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('', function(){
       $('#tipModal').remove(); //Remove modal first       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
       
      });
     });
     $("#btnCancel").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('', function(){
       $('#tipModal').remove();
       if($.isFunction(cancelCaller)){
        cancelCaller(false);
       }
       
      });
     });
     break;
    case 'alert':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('', function(){
       $('#tipModal').remove();
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
      });
     });
     break;
   };
   $('#tipModal').on('', function(){
    $('#tipModal').remove();
   });
   $("#tipModal .close").click(function(){
    $('#tipModal').on('', function(){
     $('#tipModal').remove();
    });
   });
   //Set the window to drag   $('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog'));
  }
 };

 dialogConfirm = function(params){
  $.(params);
 };

 dialogAlert = function(params){
  $.(params);
 };
})(jQuery);

//Drag the layer;(function($){
 $.({
  Draggable: function(objMoved){
   return (function(){
    //The position when the mouse is pressed    var mouseDownPosiX, mouseDownPosiY;
    //Obj's initial position    var objPosiX, objPosiY;
    //The distance of the mouse    var tempX, tempY;
    //Moving object    var obj = $(objMoved)==undefined ? $(this): $(objMoved);

    //Is it in a moving state    var status = false;

    $(this).mousedown(function(e){
     status = true;
     mouseDownPosiX = ;
     mouseDownPosiY = ;
     objPosiX = ("left").replace("px", "");
     objPosiY = ("top").replace("px", "");
    }).mouseup(function(){
     status = false;
    }); 
    $(document).mousemove(function(e){
     if(status){
      tempX = parseInt() - parseInt(mouseDownPosiX) + parseInt(objPosiX);
      tempY = parseInt() - parseInt(mouseDownPosiY) + parseInt(objPosiY);
      ({ "left": tempX + "px", "top": tempY + "px" }); 
     }
     //Judge whether it exceeds the form     //Calculate the position to the right of the pop-up layer     var dialogRight = parseInt($(window).width())-(parseInt(("left"))+parseInt(()));
     var dialogBottom = parseInt($(window).height())-(parseInt(("top"))+parseInt(()));
     var maxLeft = $(window).width()-();
     var maxTop = $(window).height()-();
     if(parseInt(("left"))<=0){
       ("left","0px"); 
     }
     if(parseInt(("top"))<=0){
      ("top","0px"); 
     }
     if(dialogRight<=0){
      ("left",maxLeft+'px'); 
     }
     if(dialogBottom<=0){
      ("top", maxTop+'px');
     }
    }).mouseup(function(){
     status = false;
    }).mouseleave(function(){
     status = false;
    });
   });
  }
 });
})(jQuery)

Called in the html page:

<body>
<div class="box">
 <button class="btn btn-default" >Confirm box</button>
 <button class="btn btn-default" >Prompt box</button>
</div>
</body>
<script src="jquery/"></script>
<script src="bootstrap/"></script>
<script src="js/"></script>
<script type="text/javascript">
$(function(){
 $("#btn_confirm").click(function(){
  dialogConfirm({
   width: 500,
   content: 'Are you sure you want to delete it?',
   headerBackground: 'info',
   vbackdrop: true,  //Default clicking on the mask will not turn off the modal   vkeyboard: true,   //Press esc to close modal   confirmFn: function(e){
    dialogAlert({
     width: 300,
     content: 'true',
     headerBackground: 'success',
     vbackdrop: 'static',  //Default clicking on the mask will not turn off the modal     vkeyboard: true   //Press esc to close modal    });
   },
   cancelFn: function(f){
    alert(f);
   }
  })
 });

 $('#btn_cancel').click(function(){
  dialogAlert({
   width: 300,
   content: 'Delete successfully!',
   headerBackground: 'error',
   vbackdrop: 'static',  //Default clicking on the mask will not turn off the modal   vkeyboard: true,   //Press esc to close modal  });
 });
});
</script>

I feel that the writing is not very good, so I modified or expanded the function before updating it. The source code will be uploaded to the file.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.