欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何使用jquery制作弹出框效果

程序员文章站 2022-06-20 17:57:44
使用jquery制作弹出框效果,非常不错的国产js弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,兼容性好,支持的弹出框模式有: alert:普...

使用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 _objp = "<p id='j-dialog-" + id + "' class='j-dialog ";
    if (options.theme != "") {
      _objp = _objp + "j-dialog-" + options.theme + "'>";
    } else {
      _objp = _objp + "'>";
    }
    _objp = _objp + "<p class='j-dialog-header'>";
    if (options.showclose) {
      _objp = _objp + "<a href='javascript:void(0)' class='j-close j-dialog-close'></a>"
    } 
    if (options.title != "") {
      _objp = _objp + "<h5 class='j-dialog-title'>" + options.title + "</h5>";
    }
    _objp = _objp + "</p>";
    _objp = _objp + "<p class='j-dialog-content'>" + options.content + "</p>";
     
    if (options.showbuttons) {
      _objp = _objp + "<p class='j-dialog-footer'>";
      $.each(options.buttons,function(i,value) { 
        _objp = _objp + "<a class='j-button' data-id='" + i + "'>" + value.title + "</a>";
      })
      _objp = _objp + "<a class='j-button j-button-primary j-dialog-ok'>" + options.okval + "</a>";
      _objp = _objp + "<a class='j-button j-dialog-cancel'>" + options.cancelval + "</a>";
      _objp = _objp + "</p>";
    };
     
    _objp=_objp+"</p>";
    $("body").append(_objp);
    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有所帮助。