jq ajax弹窗代码

暂无标签
<a href="javascript:;" data-title="弹窗标题(可省略)" data-dialog-url="/publish/article_del/72ee574f0469fb97448068d07effeb8d" data-size="small">这个弹窗的内容是通过ajax请求的</a>

data-size参数
big:1000px * 100%-6rem
middle: 800px * 100%-6rem
small: 500px * auto
触发:

$(document).on("click", "[data-dialog-url]",function () {
    var winsize = $(this).data("size");
    switch (winsize) {
        case ("big"):
            var win_width = "1000px",win_height = "calc( 100% - 6rem )";
            break;
        case ("middle"):
            var win_width = "800px",win_height = "calc( 100% - 6rem )";
            break;
        case ("small"):
      var win_width = "500px",win_height = "auto";
      break;
    default:
      var win_width = "500px",win_height = "auto";
  }
  $(this).createModal({
    background: "#000",//设定弹窗之后的覆盖层的颜色
    width: win_width,//设定弹窗的宽度
    height: win_height,//设定弹窗的高度
    resizable: false,//设定弹窗是否可以拖动改变大小
    move: false,//规定弹窗是否可以拖动
    bgClose: true,//规定点击背景是否可以关闭
    });
});

插件

(function($) {
  $.fn.createModal = function(options, callback) {
    var opts = $.extend({},
    $.fn.createModal.defaults, options);
    return this.each(function() {
      $this = $(this);
      var modalContainer = document.createElement("div"),
      modalBg = document.createElement("div"),
      modalContent = document.createElement("div");
      $(modalBg).css({
          "position": "absolute",
          "top": 0,
          "left": 0,
          "width": "100%",
          "height": "100%",
          "background-color": opts.background,
          "opacity": 0.5
      });
      $(modalContent).css({
          "position": "fixed",
          "background-color": "#fff",
          "width": opts.width,
          "height": opts.height,
          "left": ($(document).width() - parseInt(opts.width)) / 2,
          "top": ($(window).height() - parseInt(opts.height)) / 2,
          "border-radius": "5px",
      });
      $(modalContainer).addClass('global-dialog animate animate-fast fadeIn').css({"position": "fixed","top": "0","right": "0","bottom": "0","left": "0","z-index": "203","display": "-webkit-box","display": "-ms-flexbox","display": "flex","-webkit-box-orient": "vertical","-webkit-box-direction": "normal","-ms-flex-direction": "column","flex-direction": "column","-webkit-box-pack": "center","-ms-flex-pack": "center","justify-content": "center","overflow-x": "hidden","overflow-y": "auto","-webkit-transition": "opacity .3s ease-out","transition": "opacity .3s ease-out","padding": "3rem 0",}).append(modalBg).append(modalContent);
      var writeModal = function(_$this) {
          $(window).resize(function() {
              $(modalContent).css({
                  "left": ($(window).width() - parseInt(opts.width)) / 2,
                  "top": ($(window).height() - parseInt(opts.height)) / 2
              });
              $(modalBg).css({
                  "height": $(document).height()
              })
          });
          $(modalContent).append("<button class='modal-close close-pos-r-t' style='position: absolute;right: -60px;padding: 1rem;background: none;border: 0;top:0px;'><svg class='text-white' fill='currentColor' viewBox='0 0 24 24' width='24' height='24'><path d='M13.486 12l5.208-5.207a1.048 1.048 0 0 0-.006-1.483 1.046 1.046 0 0 0-1.482-.005L12 10.514 6.793 5.305a1.048 1.048 0 0 0-1.483.005 1.046 1.046 0 0 0-.005 1.483L10.514 12l-5.208 5.207a1.048 1.048 0 0 0 .006 1.483 1.046 1.046 0 0 0 1.482.005L12 13.486l5.207 5.208a1.048 1.048 0 0 0 1.483-.006 1.046 1.046 0 0 0 .005-1.482L13.486 12z' fill-rule='evenodd'></path></svg></button>");
          var getTitle = _$this.attr("data-title");
          if (getTitle) {
              $(modalContent).append("<div class='modal-header' control-move><div class='modal-title'><strong>" + _$this.attr("data-title") + "</strong></div></div>");
          }
          if (_$this.attr("data-dialog-url")) {
              var _token = $('meta[name="csrf-token"]').attr('content');
              htmlobj = $.ajax({
                  url: _$this.attr("data-dialog-url"),
                  data:{"_token":_token},
                  async: false,
                  beforeSend:function(XMLHttpRequest){
                      $(modalContent).append("<div class='dialog-loading loading d-table mx-auto my-5'></div>");
                  },
                  success:function(data,textStatus){
                      $(modalContent).find(".dialog-loading").remove();
                      $(modalContent).append("<div class='modal-body'>" + data + "</div>");
                           },
                           error: function (error) {
                               $(modalContent).find(".dialog-loading").remove();
                               $(modalContent).append("<div class='modal-body text-center py-5'>数据获取失败!</div>");
                           }
              });
          } else {
              if (opts.html == "") {
                  var getContent = _$this.html();
                  $(modalContent).append("<p>" + getContent + "</p>").append("<p>这种情况就是直接读取触发当前事件的元素的html代码</p>");
              } else {
                  $(modalContent).append(opts.html);
              }
          };
          $(modalContainer).prependTo("body");
          if (opts.bgClose) {
              $(modalBg).click(function() {
                  $(modalContent).empty();
                  $(modalContainer).remove();
              });
          };
          $(".modal-close").click(function() {
              $(modalContent).empty();
              $(modalContainer).remove();
          });
          if (opts.move) {
              $(modalContent).find("[control-move]").css("cursor", "move").on("mousedown",
              function(e) {
                  $(this)[0].oncontextmenu = function(e) {
                      return false;
                  }
                  var getStartX = e.pageX,
                  getStartY = e.pageY;
                  var getPositionX = $(modalContent).offset().left,
                  getPositionY = $(modalContent).offset().top;
                  $(document).on("mousemove",
                  function(e) {
                      var getEndX = e.pageX,
                      getEndY = e.pageY;
                      $(modalContent).css({
                          left: getEndX - getStartX + getPositionX,
                          top: getEndY - getStartY + getPositionY
                      });
                  });
                  $(document).on("mouseup",
                  function() {
                      $(document).unbind("mousemove");
                  })
              });
          };
          if (opts.resizable) {
              var resizeControl = "<div class='resizable-e'></div>" + "<div class='resizable-s'></div>" + "<div class='resizable-w'></div>" + "<div class='resizable-n'></div>" + "<div class='resizable-en'></div>" + "<div class='resizable-es'></div>" + "<div class='resizable-wn'></div>" + "<div class='resizable-ws'></div>";
              var e = "resizable-e",
              s = "resizable-s",
              w = "resizable-w",
              n = "resizable-n",
              en = "resizable-en",
              es = "resizable-es",
              ws = "resizable-ws",
              wn = "resizable-wn";
              $(modalContent).append(resizeControl);
              $("." + e + "," + "." + s + "," + "." + w + "," + "." + n + "," + "." + en + "," + "." + es + "," + "." + ws + "," + "." + wn).mousedown(function(ev) {
                  var getStartX = ev.pageX,
                  getStartY = ev.pageY,
                  getWidth = $(modalContent).width(),
                  getHeight = $(modalContent).height(),
                  getLeft = $(modalContent).offset().left,
                  getTop = $(modalContent).offset().top;
                  $this = $(this);
                  $(document).mousemove(function(ev) {
                      var getEndX = ev.pageX,
                      getEndY = ev.pageY;
                      var getOffsetX = getEndX - getStartX,
                      getOffsetY = getEndY - getStartY;
                      if ($this.attr("class") == e) {
                          $(modalContent).css("width", getWidth + getOffsetX);
                      } else if ($this.attr("class") == s) {
                          $(modalContent).css("height", getHeight + getOffsetY);
                      } else if ($this.attr("class") == w) {
                          $(modalContent).css({
                              "width": getWidth - getOffsetX,
                              "left": getLeft + getOffsetX
                          });
                      } else if ($this.attr("class") == n) {
                          $(modalContent).css({
                              "height": getHeight - getOffsetY,
                              "top": getTop + getOffsetY
                          });
                      } else if ($this.attr("class") == en) {
                          $(modalContent).css({
                              "width": getWidth + getOffsetX,
                              "height": getHeight - getOffsetY,
                              "top": getTop + getOffsetY
                          });
                      } else if ($this.attr("class") == es) {
                          $(modalContent).css({
                              "width": getWidth + getOffsetX,
                              "height": getHeight + getOffsetY
                          });
                      } else if ($this.attr("class") == ws) {
                          $(modalContent).css({
                              "width": getWidth - getOffsetX,
                              "height": getHeight + getOffsetY,
                              "left": getLeft + getOffsetX
                          });
                      } else if ($this.attr("class") == wn) {
                          $(modalContent).css({
                              "width": getWidth - getOffsetX,
                              "height": getHeight - getOffsetY,
                              "left": getLeft + getOffsetX,
                              "top": getTop + getOffsetY
                          });
                      }
                  });
                  $(document).mouseup(function() {
                      $(this).unbind("mousemove");
                  });
              })
          };
          if (callback) {
              callback();
          };
          if (opts.addFunction) {
              opts.addFunction();
          };
      }
      writeModal($this);
    });
  };
  $.fn.createModal.defaults = {
    background: '#000000',
    width: '600px',
    height: '500px',
    html: "",
    move: true,
    resizable: true,
    bgClose: false,
    addFunction: function() {}
  };
})(jQuery);