我有一个模式,当激活时会禁用背景滚动(通过将html
设置为overflow: hidden
)。
我尝试了各种解决方案,由于滚动条的宽度,所有这些都会导致网站在激活模态时增加宽度。这是我的代码:
(function ($) {
$.fn.extend({
leanModal: function (options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function () {
close_modal(modal_id)
});
$(o.closeButton).click(function () {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({
"display": "block",
opacity: 0
});
$("#lean_overlay").fadeTo(200, o.overlay);
$('html').css('overflow', 'hidden');
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$('html').css('overflow', 'scroll');
$(modal_id).css({
"display": "none"
})
}
}
})
})(jQuery);
也许我可以通过其他方式禁用背景滚动?
这是一个小提琴:http://jsfiddle.net/p88Rt/1/
答案 0 :(得分:1)
请检查这些更改。可能它会帮助你。 在js小提琴中改变$(&#39; html&#39;)。css到这个
$('html').css({
"overflow": "hidden",
"width":$("body").outerWidth(),
});
以这种方式添加边距。根据要求,您可以更改它。
#popup {
width:80%;
height: 200px;
background: lightyellow;
margin: 10% 8.5%;
position: absolute;
display: none;
}
答案 1 :(得分:0)
这样可行,但会将用户带回页面顶部:
(function ($) {
$.fn.extend({
leanModal: function (options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function () {
close_modal(modal_id)
});
$(o.closeButton).click(function () {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({
"display": "block",
opacity: 0
});
$("#lean_overlay").fadeTo(200, o.overlay);
$('body').css({
"overflow": "hidden",
"height": "100%",
"position": "fixed"
});
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$('body').css('overflow', 'scroll');
$(modal_id).css({
"display": "none"
})
}
}
})
$("a[rel*=leanModal]").leanModal();
})(jQuery);
有什么建议吗?