Using jquery to make a pop-up box effect

Source: Internet
Author: User
Tags extend

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);
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.