使用jquery製作彈出框效果

使用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 + "<div class='j-dialog-header'>"; if (options.showclose) { _objdiv = _objdiv + "<a href='javascript:void(0)' class='j-close j-dialog-close'></a>" } 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'>" + options.okval + "</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.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); }, $.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: "absolute", color: "#E94F06" }); $("body").append($i); $i.animate({ top: 20, opacity: 0}, 1500, function () { $i.remove(); }); }   })(jQuery);