这必须是非常简单的,但我无法理解 -
我正在使用这个插件 https:/cdnjs.cloudflare.comajaxlibsjquery-modal0.9.1jquery.modal.min.js。 在我的网站上的模态弹出窗口&我想有一个不同的颜色块的背景上每个。
我似乎无法针对屏蔽者的css动态改变其颜色。当我点击打开模态时,出现了屏蔽器div和类。
<div class="jquery-modal blocker current">
::before
<div id="id1" class="modal" style="display: inline-block;">
</div>
</div>
据我所知,这是相关的js。
block: function () {
this.$elm.trigger(o.modal.BEFORE_BLOCK, [this._ctx()]),
this.$body.css({ position: "relative", overflow: "hidden", height: "100%" }),
(this.$blocker = o('<div class="' + this.options.blockerClass + ' blocker current"></div>').appendTo(this.$body)),
n(),
this.options.doFade && this.$blocker.css("opacity", 0).animate({ opacity: 1 }, this.options.fadeDuration),
this.$elm.trigger(o.modal.BLOCK, [this._ctx()]);
},
unblock: function (t) {
!t && this.options.doFade
? this.$blocker.fadeOut(this.options.fadeDuration, this.unblock.bind(this, !0))
: (this.$blocker.children().appendTo(this.$body), this.$blocker.remove(), (this.$blocker = null), n(), o.modal.isActive() || this.$body.css({ position: "", overflow: "", height: "" }));
},
还有这一点,我想。
(o.modal.getCurrent = l),
(o.modal.defaults = {
closeExisting: !0,
escapeClose: !0,
clickClose: !0,
closeText: "✕",
closeClass: "",
modalClass: "modal",
blockerClass: "jquery-modal",
spinnerHtml: '<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',
showSpinner: !0,
showClose: !0,
fadeDuration: null,
fadeDelay: 1,
}),
我试过在html文档的最后用脚本来改变背景色,目标是 "jquery-modal"。
$('a[data-modal]').click(function(event) {
$(this).modal();
$('.jquery-modal').css('background-color, red');
return false;
});
我已经用'.blocker'和'.jquery-modal.blocker.current'试过了。我也曾试图创建一个新的附加类来置于阻塞器之上,但它似乎很笨重,也没有必要。
我基本不知道如何针对主动屏蔽器,让我可以根据被打开的模态的id来改变颜色。