Using jquery to make a pop-up box effect

Very good domestic JS pop-up box plug-in, by the front-end engineer alien development, providing a variety of types of custom dialog box, the use of simple, browser-compatible, supported by the pop-up box mode:

Alert: General Prompt (warning) dialog box
Confirm: Ask (Confirm) dialog box
Message: Simple Messages dialog box (no title, no buttons)
IFRAME: Embedding an IFRAME in a dialog box
Tip: Small tip with small triangular point
Dialog: The most basic custom dialog box

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138-139

  var jdialogid = []; (function ($) {$.jdialog = function (options) {  var id = parseint (Math.floor (Math.random () * 1000 + 1)); InArray (ID, Jdialogid)!=-1) {id = parseint (Math.floor (Math.random () * 1000 + 1)); Jdialogid.push (ID);   var defaults = {title: "", Content: "This is a Jasui-dialog plugin", width:350, height:0, timer:0, Showbuttons:false, Butto NS: [], Okval: "Confirm", Ok:function () {return false;}, Cancelval: "Cancel", Cancel:function () {return false;}, Showclose:t Rue, Close:function () {}, Theme: ""}; var options = $.extend (defaults, options); var _objdiv = "<div id= ' j-dialog-" + ID + "' class= ' J-dialog '"; if (Options.theme!= "") {_objdiv = _objdiv + "j-dialog-" + options.theme + "' >";} else {_objdiv = _objdiv + "' >";} _objdiv = _objdiv + "<div class= ' J-dialog-header ' >"; if (options.showclose) {_objdiv = _objdiv + <a href= ' javascript:void (0) ' class= ' j-close j-dialog-close ' ></a& gt; "} if (Options.title!= "") {_objdiv =_objdiv + "<h5 class= ' J-dialog-title ' >" + options.title + "</h5>"; } _objdiv = _objdiv + "</div>"; _objdiv = _objdiv + "<p class= ' j-dialog-content ' >" + options.content + "</p>";   if (options.showbuttons) {_objdiv = _objdiv + "<div class= ' j-dialog-footer ' >"; $.each (Options.buttons, function (i,value) {_objdiv = _objdiv + "<a class= ' J-button ' data-id= '" + i + "' >" + value.title + "</a>";}) _objdiv = _objdiv + "<a class= ' J-button j-button-primary ' >" + j-dialog-ok + "</a>"; _objdiv = _objdiv + "<a class= ' J-button j-dialog-cancel ' >" + options.cancelval + "</a>"; _objdiv = _objdiv + "</div>"; };   _objdiv=_objdiv+ "</div>"; $ ("Body"). Append (_objdiv); 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: ' 30% ', opacity:1}, 0); if (options.showclose) {_obj.find ('. J-dialog-close '). On (' click ', Function () {$.jdialogremove (ID, options.close);}) _ Obj.find ('. J-dialog-ok '). On (' click ', function () {if (!options.ok ()) {$.jdialogremove (ID, options.close);}}) _obj.fin D ('. 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 ', func tion () {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, Jdialogi d), 1); $ (' #j-dialog-' + ID). Animate ({top: ' 0 ", opacity:0}, function () {$ (' #j-dialog-' + ID). remove (); if (callback) {C Allback (); } }); }, $.jtip = function (options) {var defaults = {content: "This is a Jasui-dialog plugin", width:200, timer:0, Showclose:false, Close:function () {}, Theme: ""}; var options = $.extend (defaults, options); $.jdialog (options); }, $.jfloattext = function (txt,color,posx,posy) {var $i = $ ("<b>"). Text (txt); var x = ' 50% ', y = ' 40% '; var _color = ' #E94F06 '; if (color) {_color= color;} if (posx) {x = posx} if (posy) {y = posy;} $i. css ({top:200, left:x, Position: "Absol Ute ", Color:" #E94F06 "}); $ ("Body"). Append ($i); $i. Animate ({top:20, opacity:0}, 1500, function () {$i. Remove ();}); }  }) (JQuery);