使用jquery製作彈出框效果

非常不錯的國產JS彈出框外掛，由前端工程師alien開發，提供多種型別的自定義對話方塊，使用方法簡單，瀏覽器相容性好，支援的彈出框模式有： alert：普通提示（警告）對話方塊 confirm：詢問（確認）對話方塊 message：簡單訊息對話方塊（無title、無按鈕） iframe：在對話方塊中嵌入一個iframe tip：帶有小三角指向的小tip dialog：最基礎的自定義對話方塊 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 43 44 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 84 85 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 119 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)); while ($.inArray(id, jDialogId) != -1) { id = parseInt(Math.floor(Math.random() * 1000 + 1)); } jDialogId.push(id);

var defaults = { title:"", content: "這是一個JasUI-Dialog外掛", width: 350, height: 0, timer: 0, showbuttons:false, buttons: [], okval: "確認", ok: function () { return false;}, cancelval: "取消", cancel: function () { return false; }, showclose:true, 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 + "

" + options.content + "

if (options.showbuttons) { _objdiv = _objdiv + "

_objdiv=_objdiv+""; $("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()) {# http://www.boysd.com/ $.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: "這是一個JasUI-Dialog外掛", width: 200, timer: 0, showclose: false, close: function () { }, theme: "" }; var options = $.extend(defaults, options); $.jDialog(options); },http://blog.sina.com.cn/zhuomadan $.jFloatText = function (txt,color,posX,posY) { var $i = $("").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: "absolute", color: "#E94F06" }); $("body").append($i); $i.animate({ top: 20, opacity: 0}, 1500, function () { $i.remove(); }); }

})(jQuery);