[英]How to make Lightbox scroll but not background
I am trying to create a lightbox to show some custom data. 我正在尝试创建一个灯箱来显示一些自定义数据。 There are two problems I am facing which I do not know how to handle.
我面临两个问题,我不知道如何处理。
1. First problem is I don't want the page to scroll(vertically) when lightbox is visible. 1.第一个问题是当灯箱可见时,我不希望页面滚动(垂直)。
2. Second problem is I want the lightbox to scroll if the content is bigger than the viewport of the browser. 2.第二个问题是如果内容大于浏览器的视口,我希望灯箱滚动。
But I am not sure how to approach this. 但我不知道如何处理这个问题。 I tried
overflow-x:scroll; overflow-y:scroll;
我试过
overflow-x:scroll; overflow-y:scroll;
overflow-x:scroll; overflow-y:scroll;
but it shows the scrollbar but doesn't scroll. 但它显示滚动条但不滚动。
Following is the code I currently have : 以下是我目前的代码:
Html: HTML:
<div class="lightbox">
<section class="image-app">
<div class="app-bar">
<div class="app-close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
<div class="container_fluid">
<div class="row">
<div class="col-md-8">
<div class="app-image">
</div>
</div>
<div class="col-md-4">
<div class="side-bar">
</div>
</div>
</div>
</div>
</section>
</div>
CSS: CSS:
.lightbox {
display: none;
position: fixed;
background: rgba( 0, 0, 0, 0.7 );
bottom: 0;
right: 0;
top: 0;
left: 0;
z-index: 1000;
}
.image-app {
display: none;
position: relative;
background: #fafafa;
top: 3%;
left: 3%;
width: 94%;
min-height: 94%;
overflow-x:scroll;
overflow-y:scroll;
border: #8e8e8e;
z-index: 1001;
padding: 10px;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
}
.app-close {
padding: 10px 10px;
text-align: right;
font-size: 150%;
cursor: pointer;
}
.app-image {
text-align: center;
background: #ffffff;
}
.side-bar {
position: relative;
height: 100%;
width: 100%;
}
Javascript : Javascript:
$ ( '.item' ).click( function ( event ) {
event.preventDefault ( );
event.stopPropagation ( );
$( '.lightbox' ).show ( );
$( '.image-app' ).slideToggle ( "fast" );
} );
if ($('.lightbox').css('display') != 'none') {
$('body').on({'mousewheel': function(e) {
e.preventDefault();
e.stopPropagation();
}
})
}
var div = $(".lightbox").height();
var win = $(window).height();
if (div > win ) {
$(".lightbox").css("overflow-x","scroll");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.