非常不错的国产JS弹出框插件，由前端工程师alien开发，提供多种类型的自定义对话框，使用方法简单，浏览器兼容性好，支持的弹出框模式有：

alert：普通提示（警告）对话框

confirm：询问（确认）对话框

message：简单消息对话框（无title、无按钮）

iframe：在对话框中嵌入一个iframe

tip：带有小三角指向的小tip

dialog：最基础的自定义对话框

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 + "'; if (options.theme != "") { _objdiv = _objdiv + "j-dialog-" + options.theme + "'>"; } else { _objdiv = _objdiv + "'>"; } _objdiv = _objdiv + "<div>"; if (options.showclose) { _objdiv = _objdiv + "<a href='javascript:void(0)'></a>" } if (options.title != "") { _objdiv = _objdiv + "<h5>" + options.title + "</h5>"; } _objdiv = _objdiv + "</div>"; _objdiv = _objdiv + "<p>" + options.content + "</p>"; if (options.showbuttons) { _objdiv = _objdiv + "<div>"; $.each(options.buttons,function(i,value) { _objdiv = _objdiv + "<a data-id='" + i + "'>" + value.title + "</a>"; }) _objdiv = _objdiv + "<a>" + options.okval + "</a>"; _objdiv = _objdiv + "<a>" + 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);

以上所述就是本文的全部内容了，希望能够对大家熟练使用jQuery有所帮助。