使用jquery制作弹出框效果

前端之家收集整理的这篇文章主要介绍了使用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<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>",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,showclose: false,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有所帮助。

原文链接:https://www.f2er.com/jquery/54937.html

猜你在找的jQuery相关文章