Question

只需尝试创建一个可以放大和模糊背景的模态。

我将其扩展为可以使用的几种模式。

请参见小提琴：https://jsfiddle.net/postcolonialboy/9jq84p1h/144/

基于hakim https://lab.hakim.se/avgrund/的复仇行为

! function(a) {
  a.fn.vcModal = function(b) {
    function m() {
      a(document).on("click touchstart", n), a(document).on("keyup", o), f.show().addClass("avgrund-popup-animate"), f.addClass("no-transition"), setTimeout(function() {
        f.removeClass("no-transition"), e.addClass("avgrund-active")
      }, 0)
    }

    function n(b) {
      a(b.target).hasClass("avgrund-cover") && p()
    }

    function o(a) {
      27 === a.keyCode && p()
    }

    function p(b) {
      a(document).off("click touchstart", n), a(document).off("keyup", o), e.removeClass("avgrund-active"), f.removeClass("avgrund-popup-animate"), b.preventDefault()
    }
    var c = this;
    a.extend({
      container: ".avgrund-container",
      param: "value"
    }, b);
    var e = a(document.documentElement).addClass("avgrund-ready"),
      f = c.find(".avgrund-popup"),
      g = a(this).data("width");
    "on" != c.data("loadedvisible") && f.hide(), f.css({
      padding: "0",
      color: c.data("textcolor"),
      background: c.data("background"),
      "margin-top": c.data("margintop")
    }), "string" == typeof g ? (g = g.replace(/[^\d\.]/g, ""), f.css({
      width: c.data("width"),
      "margin-left": .5 * -g + "%"
    })) : f.css({
      "margin-left": .5 * -g,
      width: c.data("width")
    }), a(".avgrund-cover").each(function(b) {
      b > 0 && a(this).remove()
    });
    var h = c.find(".avgrund-cover"),
      i = c.find(".avgrund-btn"),
      j = i.next(".vc_btn"),
      k = c.find(".avgrund-close");
    return f.insertAfter("body"), h.insertAfter("body"), k.on("click", p), j[0] && j.on("click", function(a) {
      m(), a.preventDefault()
    }), i.on("click", function(a) {
      m(), a.preventDefault()
    }), this
  }
}(jQuery), jQuery(document).ready(function(a) {
  a(".avgrund-container").each(function() {
    a(this).vcModal()
  })
});

有人可以帮忙嵌套多个模态，以便在弹出窗口中再次缩放和模糊所有内容吗？

Thx

缩放和模糊模态嵌套

0 个答案: