Custom jquery floating pop-up box plugin

Customizing floating pop-up box usage instructions

1. Jquery.alert.js source code is as follows:

(function($){    varDefaults ={width:350,//floating pop-up box widthHEIGHT:200,//floating pop-up box heightMINWIDTH:350,//floating pop-up box minimum widthMINHEIGHT:200,//floating popover min. heightfontFamily: "Microsoft Ya Black",//floating pop-up text font in boxFontSize: "12px",//text size in floating popup boxClosebtnstyle: {},//Floating Popup "close" button styleConfirmbtnstyle: {},//Floating Popup "confirm" button styleCanclebtnstyle: {},//Floating Popup "Cancel" button styleTitle: "",//floating pop-up box titleTitleStyle: {},//Floating popup title styleInnerHtml: "",//floating pop-up box contentContainer: "",//container for displaying floating pop-up boxesShowbtns:true,//whether the OK and Cancel buttons are displayedONCLOSEBTN:function(Container) {
　　　　　　container. html (); },//bind a point Click the Close button event (pending expansion)ONCONFIRMBTN:function(container) {
　　　　　　container.html (); },//bind point Click OK button event (pending extension)ONCANCLEBTN:function(container) {
　　　　　　container.html (); }//bind a point Click the Cancel button event (pending expansion)    }; varOption_default =defaults; /** * Custom floating pop-up box*/$.fn.alert=function(options) {varOptions =$.extend (defaults,options); _setting=options; $ This= This; return  This. each (function(){                    var$timer =NewDate (). GetTime (); var$container = _setting.container = = ""? $ This: $ (_setting.container); var$innerHtml = _setting.innerhtml = = ""?$container. HTML (): _setting.innerhtml;            $container. Hide ();            $container. HTML (_htmltemplate (_setting, $innerHtml, $timer));            _setstyle (_setting, $timer, $container);            _postion ($timer);        $container. Show ();            });        }; /** HTML Templates*/    var_htmltemplate =function(options,innerhtml,timer) {varHTMLheader = "<div id= ' jquery-alert-header-" +timer+ "' style= ' width:350px;height:30px;line-height:30px; Background-color: #0085D0; ' ><div id= ' jquery-alert-title-"+timer+" ' style= ' height:30px;display:inline-block;text-align:center; Font-weight:bold ' > "+options.title+" </div><div id= ' jquery-alert-close-"+timer+" ' style= ' width:30px; Height:30px;line-height:30px;display:inline-block;float:right ' ><input type= ' button ' id= ' jquery-alert-closebtn-"+timer+" ' style= ' width:18px;height:18px;margin:auto;border:none;margin-top:6px; Background-color: #0085D0; Background-image:url (\ "res/images/close.png\"); cursor:pointer; ' title= ' Close '/>< /div></div> "; varHtmlfooter = "<div id= ' jquery-alert-footer-" +timer+ "' style= ' width:350px;height:30px;padding:10px 0; Background-color: #fff; ' ><input type= ' button ' id= ' jquery-alert-confirmbtn-"+timer+" ' value= ' OK ' style= ' height:30px;line-height:30px; Width:60px;border:none;background-color: #0085D0; color: #fff; cursor:pointer; ' /><input type= ' button ' id= ' jquery-alert-canclebtn-"+timer+" ' value= ' Cancel ' style= ' height:30px;line-height:30px; Width:60px;margin-left:30px;border:none;background-color: #0085D0; color: #fff; cursor:pointer; ' /></div> "; varHtmlBody = "<div id= ' jquery-alert-body-" +timer+ "' style= ' Width:350px;height:120px;background-color: #F2F4FF ' > "+innerhtml+" </div> "; return"<div id= ' jquery-alert-main-" +timer+ "' style= ' min-width:350px;min-height:200px;width:350px;height:200px; margin:auto;text-align:center;z-index:1000;position:fixed;top:200px;left:542px; ' > "+htmlheader+htmlbody+htmlfooter+" </div><div style= ' background:none repeat scroll 0% 0% #999999; width: 100%;height:100%;p Osition:fixed;left:0;top:0;z-index:300;filter:alpha (opacity=50);-moz-opacity:0.50; opacity:0.50; ' ></div> ";        }; /** Set CSS style*/    var_setstyle =function(Options,timer,container) {$ ("#jquery-alert-main-" +timer). Width (options.width). Height (options.height). css ({"font-family": options.fontfamily , "Font-size": Options.fontsize}); $("#jquery-alert-body-" +timer). Width (options.width). Height (options.height-80); $("#jquery-alert-header-" +timer). width (options.width); $("#jquery-alert-footer-" +timer). width (options.width); $(' #jquery-alert-title-' +timer). CSS (Options.titlestyle); $(' #jquery-alert-closebtn-' +timer). CSS (Options.closebtnstyle); $(' #jquery-alert-confirmbtn-' +timer). CSS (Options.confirmbtnstyle); $(' #jquery-alert-canclebtn-' +timer). CSS (Options.canclebtnstyle); if(!options.showbtns) {            $("#jquery-alert-footer-" +timer). Remove ();    } _bindevents (Options,timer,container);        }; /** Control the relative positioning of the popup (relative to the center of the screen)*/    var_postion =function(timer) {varA = $ (window). Width ()-$ ("#jquery-alert-main-" +timer). width (); varb = $ (window). Height ()-$ ("#jquery-alert-main-" +timer). Height (); A= a >=0? a:0; b= b >=0? b:0; $("#jquery-alert-main-" +timer). CSS ("Top", Math.floor (B/2) + "px"); $ ("#jquery-alert-main-" +timer). CSS ("left", Math.floor (A/2) + "px");    }; /** Bind each button click event*/    var_bindevents =function(Options,timer,container) {$ (' #jquery-alert-closebtn-' +timer). On (' click ',function() {onclosebtn (container);        }); if(Options.showbtns) {$ (' #jquery-alert-confirmbtn-' +timer). On (' click ',function() {onconfirmbtn (container);            }); $(' #jquery-alert-canclebtn-' +timer). On (' click ',function() {oncanclebtn (container);        });    }    }; }) (jQuery);

2. Using the example

<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Customizing floating pop-up boxes</title></Head><Body><DivID= ' Testalert '></Div></Body><Scripttype= "Text/javascript"src= "Res/js/jquery-1.10.2.js"></Script><Scripttype= "Text/javascript"src= "Res/js/jquery.alert.js"></Script><Scripttype= "Text/javascript" >    $(function(){        $("#testalert"). Alert ({innerHtml:"customizing floating pop-up box content", Title:'Custom Floating Popup title', Width:650, Height: $, Container:"#testalert"        }); });</Script></HTML>

This allows you to display a custom popup box.

This plugin is to meet the project's small functions of their own custom, so no drill down, in fact, can also be based on this plug-in to expand a lot of features, time rush, there will inevitably be some bugs. If there is any problem, please correct me.

Custom jquery floating pop-up box plugin