当我的页面加载时,会显示一个 div,询问用户,他是 18 岁。
我的问题是,如果屏幕非常小,我无法向下或向上滚动到内容 div,因为只有黑色背景 div 是可滚动的,而不会滚动我的内容 div。
我认为固定位置是问题所在,但我希望#auroraOverlayContent div 至少水平居中。这不是问题,它也不是垂直居中的。
<div id="auroraOverlay" class="aurora-overlay">
<div class="auroraOverlayContent" id="auroraOverlayContent">
<div class="auroraTartalom">
<h3 style="margin-bottom:10px">Elmúltál már 18 éves?</h3>
<p>A(z) domain.hu webáruház erotikus jellegű tartalmakkal foglalkozik, ezért, kérjük nyilatkozz, hogy elmúltál-e már 18 éves.</p>
<button type="button" class="auroraBtn" id="auroraBtnYes">Igen</button>
<button type="button" class="auroraBtn" id="auroraBtnNo">Nem</button>
</div>
</div>
#auroraOverlay {
position: fixed;
width: 100%;
height: 100%;
visibility: visible;
color: #000;
top: 0;
left: 0;
background: rgba(0, 0, 0, 1);
zoom: 1;
z-index: 998;
overflow:hidden
}
#auroraOverlayContent {
position: absolute;
z-index: 999;
left: 15%;
margin-left: auto !important;
margin-right: auto !important;
width: 70% !important;
top:10%;
text-align: center;
background: #fff;
visibility: visible;
padding:30px
}
.auroraBtn{ background:#ba0944; border:1px solid #ba0944; border-radius:5px; padding:10px 18px; color:#fff; font-weight:bold;}
@media screen and (max-width: 700px) {
#auroraOverlayContent {
left: 15%;
margin-left: auto !important;
margin-right: auto !important;
width: 70% !important;
}
}
$(document).ready(function()
{
$('#auroraOverlay').hide();
if($.cookie('18old') != 'true')
{
$('#auroraOverlay').show();
}
$('#auroraBtnYes').click(function(e)
{
$.cookie('18old', true, { expires: 1 });
$('#auroraOverlay').fadeOut('fast');
});
$('#auroraBtnNo').click(function(e)
{
alert("Sorry, you are young.");
});
});
最佳答案
你可以用这个方法..
body{
text-align:center;
}
#auroraOverlayContent{
display: inline-block;
margin-top: 10%;
}
p{
padding-left:10%;
padding-right:10%;
}
<div id="auroraOverlay" class="aurora-overlay">
<div class="auroraOverlayContent" id="auroraOverlayContent">
<div class="auroraTartalom">
<h3 style="margin-bottom:10px">Elmúltál már 18 éves?</h3>
<p>A(z) domain.hu webáruház erotikus jellegű tartalmakkal foglalkozik, ezért, kérjük nyilatkozz, hogy elmúltál-e már 18 éves.</p>
<button type="button" class="auroraBtn" id="auroraBtnYes">Igen</button>
<button type="button" class="auroraBtn" id="auroraBtnNo">Nem</button>
</div>
</div>
关于jquery - 无法滚动网站上的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49686273/