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">&times;</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.