Use jquery to create a pop-up box named effect _ jquery

This article mainly uses the pop-up box effect implemented by the jDialog plug-in. the code is very brief and can be referenced by other users. The JS pop-up box plug-in made in China is developed by the front-end engineer alien and provides various types of custom dialog boxes. it is easy to use and has good browser compatibility. the pop-up box modes supported include:

Alert: normal prompt (warning) dialog box
Confirm: Confirmation dialog box
Message: simple message dialog box (no title or button)
Iframe: embed an iframe in the dialog box
Tip: a small tip with a small triangle pointing
Dialog: basic custom dialog box

Var jDialogId = []; (function ($) {$. jDialog = function (options) {var id = parseInt (Math. floor (Math. random () * 1000 + 1); while ($. inArray (id, jDialogId )! =-1) {id = parseInt (Math. floor (Math. random () * 1000 + 1);} jDialogId. push (id); var defaults = {title: "", content: "This is a JasUI-Dialog ", width: 350, height: 0, timer: 0, showbuttons: false, buttons: [], okval: "OK", OK: function () {return false ;}, cancelval: "cancel", cancel: function () {return false ;}, showclose: true, close: function () {}, theme: ""}; var options =$. extend (defaults, options); var _ objp ="
";} Else {_ objp = _ objp +" '> ";} _ objp = _ objp +"
"; If (options. showclose) {_ objp = _ objp +" "} if (options. title! = "") {_ Objp = _ objp + "" + options. title + "";} _ objp = _ objp +"
"; _ Objp = _ objp +"
"+ Options. content +"
"; If (options. showbuttons) {_ objp = _ objp +"
"; $. Each (options. buttons, function (I, value) {_ objp = _ objp + "" + value. title + "";}) _ objp = _ objp + "" + options. okval + ""; _ objp = _ objp + "" + options. cancelval + ""; _ objp = _ objp +"
";}; _ Objp = _ objp +"
"; $ (" Body "). append (_ objp); var _ obj = $ ('# j-dialog-' + id) if (options. height> 0) {_obj.css ("height", options. height);} _obj.css ("width", options. width); _obj.css ("margin-top", '-' + (options. height/2) + 'px '); _obj.css ("margin-left",'-'+ (options. width/2) + 'px '); _ obj. animate ({top: '000000', opacity: 1}, 0); if (options. showclose) {_ obj. find ('. j-dialog-close '). on ('click', function () {$. jD IalogRemove (id, options. close) ;}) _ obj. find ('. j-dialog-OK'). on ('click', function () {if (! Options. OK () {$. jDialogRemove (id, options. close) ;}}) _ obj. find ('. j-dialog-cancel '). on ('click', function () {if (! Options. cancel () {$. jDialogRemove (id, options. close) ;}}} if (options. showbuttons) {$. each (options. buttons, function (I, value) {_ obj. find ("[data-id =" + I + "]"). on ('click', function () {if (! Value. callback () {$. jDialogRemove (id, options. close) ;}})}; if (options. timer> 0) {setTimeout (function () {$. jDialogRemove (id, options. close) ;}, options. timer) ;}return id ;}, $. jDialogRemove = function (id, callback) {if ($. inArray (id, jDialogId )! =-1) {jDialogId. splice ($. inArray (id, jDialogId), 1); $ ('# j-dialog-' + id ). animate ({top: '0', opacity: 0}, 500, function () {$ ('# j-dialog-' + id ). remove (); if (callback) {callback () ;}}}}, $. jTip = function (options) {var defaults = {content: "This is a JasUI-Dialog ", width: 200, timer: 0, showclose: false, close: function () {}, theme: ""}; var options = $. extend (defaults, options); $. jDialog (options) ;}, $. jFloatText = function (txt, color, posX, posY) {var $ I = $ (""). Text (txt); var x = '000000', y = '000000'; var _ color = '# E94F06'; if (color) {_ color = color ;} if (posX) {x = posX;} if (posY) {y = posY;} $ I .css ({top: 200, left: x, position: "absolute", color: "# E94F06"}); $ ("body "). append ($ I); $ I. animate ({top: 20, opacity: 0}, 1500, function () {$ I. remove () ;};}} (jQuery );

The above is all the content of this article. I hope it will be helpful for you to use jQuery skillfully.