0
请参阅下面的Facebook注释模式框。我试图达到类似的效果,用户点击一个按钮,然后打开一个弹出框/模式框。此框将允许在新框中滚动(因为它可以是多页文本),但不允许在主页上的模式之外滚动。如何在模态允许在模态窗口内滚动但不在别处时获得类似的效果?谢谢。防止在主页面上滚动的Facebook模式弹出式菜单
请参阅下面的Facebook注释模式框。我试图达到类似的效果,用户点击一个按钮,然后打开一个弹出框/模式框。此框将允许在新框中滚动(因为它可以是多页文本),但不允许在主页上的模式之外滚动。如何在模态允许在模态窗口内滚动但不在别处时获得类似的效果?谢谢。防止在主页面上滚动的Facebook模式弹出式菜单
通常总能执行以下操作:
height:100%
到body
和html
标签。overflow: hidden
添加到body
。基本演示:jsFiddle
$("body").on("click", function(){
\t $("body").toggleClass("modalview");
})
html, body {background:#666; color:#FFF; margin: 0; padding: 0; height:100%;}
#content {
padding:1em;
width:90%;
margin:0 auto;
}
#modal {
/* hidden by default */
display: none;
/* box */
width:75%;
height:75%;
padding:1em;
position: fixed; z-index:1;
overflow: auto;
/* center modal vertically and horizontally */
left: 50%; top: 50%;
transform: translate(-50%,-50%);
/* style */
text-align: center;
background:#FFF;
box-shadow:1px 1px 15px #000;
color:#000;
}
/* prevent page scrollbars in modal view */
body.modalview { overflow:hidden; }
/* show #modal in modal view */
body.modalview #modal { display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="modal">
<p>All UR SCROLLS ARE BELONG TO US!!!</p>
<p>Et velit odit cumque hic, aspernatur. Perferendis assumenda est necessitatibus cupiditate cum odit deleniti doloribus earum veniam dolores, neque laudantium laboriosam optio numquam autem iure animi ipsa dolor fugit blanditiis?</p>
<p>Unde quidem sunt quos itaque minus, quia modi nisi temporibus. Consectetur natus perferendis possimus, rem, sed tempora cumque dolorum quod provident blanditiis eum ipsam voluptate dolor, harum doloremque id amet.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda quas, rem voluptas et, totam officia quos, quaerat doloribus eaque odio aperiam a obcaecati explicabo quod eveniet eum aliquid! Repellat.</p>
<p>Vitae ipsum explicabo voluptatibus corrupti odio ipsa, tenetur modi veritatis excepturi architecto nam dignissimos ratione. Iusto temporibus ipsum cupiditate excepturi modi eos alias dolores eveniet possimus. Alias, esse error quam!</p>
<p>Ea numquam quae laborum ut vitae molestias dolorum fugit, asperiores aliquid voluptates vero ab consequuntur ipsum maxime obcaecati temporibus voluptate sed quaerat, necessitatibus deleniti. Quibusdam iste saepe inventore amet eius.</p>
<p>Aut veritatis quos quaerat, placeat nam est ad tempora delectus magnam molestiae, ipsum cupiditate debitis illum perferendis ut nisi beatae voluptas provident consectetur inventore assumenda eveniet? Molestiae architecto ullam nulla.</p>
<p>Explicabo, debitis? Mollitia reiciendis sint minus adipisci, consectetur consequatur assumenda blanditiis pariatur ex facilis expedita et earum molestiae quos, laborum sed suscipit doloribus placeat ipsam in vero quaerat aliquid iure!</p>
<p>Earum dolorem eveniet laboriosam vel dolor! Ullam nisi adipisci voluptatem, voluptatum tenetur, itaque ducimus laboriosam repudiandae quibusdam numquam dignissimos aperiam praesentium culpa porro sapiente ab eos magni? Maiores, doloremque, aspernatur.</p>
</div>
在我的方法,我用了一个CSS类的身体切换overflow
状态。当body
获得类(.modalview
)时,它将隐藏低于折叠的内容并在显示实际模式时从页面中删除滚动条。
jQuery用于将类应用于body,并通过on
单击函数显示#modal
。
出于演示的目的,我做了#modal
显示当您只需点击网页上,你可以将功能结合到一个点击按钮,像这样:
$("#myButton").on("click", function(){
$("body").toggleClass("modalview");
})
要正确地看到这一点,加载了jsFiddle demo并播放页面宽度以查看滚动更改的方式。
那么究竟是什么问题呢?滚动通常通过添加'overflow:hidden;身高:100%到'身体'。 “*滚动不允许在任何地方。对此有任何想法?*”你希望用户能够滚动,如果没有评论? – Aziz
更新更清晰。 – Ryan
你会接受jQuery解决方案吗? – Aziz