使用jquery制作弹出框效果

非常不错的国产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 = "
"; } else { _objdiv = _objdiv + "'>"; } _objdiv = _objdiv + "
"; if (options.showclose) { _objdiv = _objdiv + "" } if (options.title != "") { _objdiv = _objdiv + "
" + options.title + "
"; } _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()) { $.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 = $("").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有所帮助。

你可能感兴趣的:(使用jquery制作弹出框效果)