Custom Plugin Learning-Bullet Box 2

;(function ($) {    //Default Parameters    varPARAMS; varDefaultparams ={Title:"Material Home", Content:"", Width:400, Height:300, URL:"", Confirmfun:NewObject, Cancelfun:NewObject}; varContentwidth = 0; varContentheight = 0; $. DIALOGBYSHF= {        //pop-up prompt boxAlert:function(params) {Show (params,"Alert"); },        //Popup Confirmation BoxConfirm:function(params) {Show (params,"Confirm"); },        //Popup reference other URL boxDialog:function(params) {Show (params,"Dialog")        },        //Close the popup boxClose:function () {            $("#DialogBySHFLayer, #DialogBySHF"). Remove ();    }    }; //Initialize Parameters    functionInit (params) {if(Params! = undefined && params! =NULL) {PARAMS=$.extend ({},defaultparams, params); } contentwidth= PARAMS. Width-10; Contentheight= PARAMS. Height-40;        }; //Show pop-up box    functionShow (params, caller) {Init (params); varScreenWidth =$ (window). width (); varScreenHeight =$ (window). Height (); //The position shown in the screen (positive middle)        varPositionleft = (screenwidth-params. Width)/2 +$ (document). ScrollLeft (); varPositiontop = (screenheight-params. Height)/2 +$ (document). ScrollTop (); varContent = []; Content.push ("<div id=\" Dialogbyshflayer\ "></div>"); Content.push ("<div id=\" dialogbyshf\ "style=\" width: "+ PARAMS. Width + "Px;height:" + PARAMS. Height + "Px;left:" + Positionleft + "Px;top:" + positiontop + "px;\" > "); Content.push ("<div id=\" title\ "><span>" + PARAMS. Title + "</span><span id=\" close\ ">& #10005;</span></div>"); Content.push ("<div id=\" Container\ "style=\" width: "+ contentwidth +" Px;height: "+ contentheight +" px;\ ">"); if(Caller = = "Dialog") {Content.push ("<iframe frameborder=\" 0\ "marginwidth=\" 0\ "marginheight=\" 0\ "src=\" + PARAMS. URL + "\" ></iframe> "); }        Else {            varTiplineheight = ContentHeight-60; Content.push ("<table>"); Content.push ("<tr><td id=\" tipline\ "style=\" Height: "+ tiplineheight +" px;\ ">" + PARAMS. Content + "</td></tr>"); Content.push ("<tr>"); Content.push ("<td id=\" btnline\ ">"); Content.push ("<input type=\" button\ "id=\" btndialogbyshfconfirm\ "value=\" OK \ "/>"); if(Caller = = "Confirm") {Content.push ("<input type=\" button\ "id=\" btndialogbyshfcancel\ "value=\" Cancel \ "/>"); } Content.push ("</td>"); Content.push ("</tr>"); Content.push ("</table>"); } Content.push ("</div>"); Content.push ("</div>"); $("Body"). Append (Content.join ("\ n"));    Setdialogevent (caller); }    //set up pop-up window events    functionsetdialogevent (caller) {//Add a button Close event$ ("#DialogBySHF #Close"). Click (function () { $.         Dialogbyshf.close ();}); //Add ESC Shutdown Event$ (window). KeyDown (function(event) {varevent = event| |window.event; if(event.keycode===27){                $.            Dialogbyshf.close ();        }        }); //Adjust dialog box position when adding window resize$ (window). Resize (function(){            varScreenWidth =$ (window). width (); varScreenHeight =$ (window). Height (); varPositionleft = parseint ((screenwidth-params. Width)/$ (document). ScrollLeft ()); varPositiontop = parseint ((screenheight-params. Height)/$ (document). ScrollTop ()); $("#DialogBySHF"). CSS ({"Top":p ositiontop+ "px", "left":p ositionleft+ "px"});        }); $("#DialogBySHF #Title"). DRAGBYSHF ($ ("#DialogBySHF")); if(Caller! = "Dialog") {            $("#DialogBySHF #btnDialogBySHFConfirm"). Click (function () {                $.                Dialogbyshf.close (); if($.isfunction (PARAMS. Confirmfun)) {PARAMS.                Confirmfun (); }            })        }        if(Caller = = "Confirm") {            $("#DialogBySHF #btnDialogBySHFCancel"). Click (function () {                $.                Dialogbyshf.close (); if($.isfunction (PARAMS. Cancelfun)) {PARAMS.                Cancelfun (); }})}}) (JQuery);//Drag Layer(function($) {$.fn.extend ({dragbyshf:function(objmoved) {return  This. each (function () {                //position when the mouse is pressed                varMousedownposix; varMousedownposiy; //The initial position of the moved object                varObjposix; varObjposiy; //Moving Objects                varobj = $ (objmoved) = = undefined? $( This): $ (objmoved); //is in a mobile state                varStatus =false; //calculate the position of movement when the mouse moves                vartempx; varTempy; $( This). MouseDown (function(e) {status=true; Mousedownposix=E.pagex; Mousedownposiy=E.pagey; Objposix= Obj.css ("left"). Replace ("px", "" "); Objposiy= Obj.css ("Top"). Replace ("px", "" "); }). MouseUp (function() {Status=false;                }); $("Body"). MouseMove (function(e) {if(status) {tempx= parseint (E.pagex)-parseint (Mousedownposix) +parseint (objposix); Tempy= parseint (E.pagey)-parseint (Mousedownposiy) +parseint (Objposiy); Obj.css ({"Left": tempx + "px", "top": Tempy + "px" }); }                    //determine if the form is out of                    //calculates the position of the pop-up layer from the right                    varDialogright = parseint ($ (window). Width ())-(parseint (Obj.css ("left") +parseint (Obj.width ())); //calculates the position of the popup layer from the bottom edge                    varDialogbottom = parseint ($ (window). Height ())-(parseint (Obj.css ("top") +parseint (Obj.height ())); varMaxleft = $ (window). Width ()-obj.width (); varMaxtop = $ (window). Height ()-obj.height (); if(Parseint (Obj.css ("left")) <=0) {obj.css ("Left", "0px"); }                    if(Parseint (Obj.css ("Top")) <=0) {obj.css ("Top", "0px"); }                    if(dialogright<=0) {obj.css ("Left", maxleft+ ' px '); }                    if(dialogbottom<=0) {obj.css ("Top", maxtop+ ' px '); }}). MouseUp (function() {Status=false; }). MouseLeave (function() {Status=false;            });        }); })}) (jQuery);

Calling methods in HTML:

<script type= "Text/javascript" >$ (document). Ready (function () {        $("#btnAlert"). Click (function () {            $. Dialogbyshf.alert ({Width:height:200, Title: "Hint Message", Content: ' Hello, this is a popup hint, that is, JS in the alert ', confirmfun:test}); })        $("#btnConfirm"). Click (function () {            $. Dialogbyshf.confirm ({Width:height:200, Title: "Prompt Message", Content: ' Confirm deletion? ', Confirmfun:test, cancelfun:testcancel}); })        $("#btnDialog"). Click (function () {            $. Dialogbyshf.dialog ({Width:1920x1080, height:1080, Title: "17 material Net", URL: ' http://www.17sucai.com ' }); })    })    functionTest () {$. Dialogbyshf.alert ({Width:height:200, Title: "Confirmation of execution Method", Content: ' Method of execution after confirmation ' }); }    functionTestcancel () {$. Dialogbyshf.alert ({Width:height:200, Title: "Method of execution after cancellation", Content: ' Method of execution after cancellation ' }); }</script>

The source code is uploaded, the file name is: Jquery-dialog-drag1.rar

Custom Plugin Learning-Bullet Box 2