萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 使用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);
copyright © 萬盛學電腦網 all rights reserved