Heim >Web-Frontend >js-Tutorial >Verwenden Sie jquery, um eine Popup-Box effect_jquery zu erstellen

Verwenden Sie jquery, um eine Popup-Box effect_jquery zu erstellen

WBOY
WBOYOriginal
2016-05-16 16:05:421190Durchsuche

Ein sehr gutes inländisches JS-Popup-Box-Plugin, das vom Front-End-Ingenieur Alien entwickelt wurde. Es bietet mehrere Arten von benutzerdefinierten Dialogfeldern. Es ist einfach zu verwenden und verfügt über eine gute Browserkompatibilität Modi sind:

Warnung: normales Eingabeaufforderungsdialogfeld (Warnung)
Bestätigen: Dialogfeld „Fragen (Bestätigen)“
Nachricht: einfaches Nachrichtendialogfeld (kein Titel, keine Schaltfläche)
iframe: Betten Sie einen iframe in das Dialogfeld ein
Tipp: Eine kleine Spitze mit einem kleinen Dreieck nach oben
Dialog: das einfachste benutzerdefinierte Dialogfeld

 
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);
    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);

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er allen bei der kompetenten Verwendung von jQuery hilfreich sein wird.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn