我一直在寻找一个"灯箱"类型的解决方案,允许这个但尚未找到一个(请,如果您知道任何,请建议).
我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样.叠加层是可滚动的(因为整个叠加层像页面顶部的页面一样向上移动),但叠加层后面的主体是固定的.
我试图用CSS创建它(即div在整个页面和主体上面叠加overflow: hidden),但它不会阻止div可滚动.
如何防止正文/页面滚动但仍在全屏容器内滚动？
我这里有一个网站.
在桌面浏览器中查看,黑色菜单栏正确地仅延伸到窗口的边缘,因为它body具有overflow-x:hidden.
在任何移动浏览器中,无论是Android还是iOS,黑色菜单栏都会显示其全宽,这会在页面右侧显示空白区域.据我所知,这个空格甚至不是html或body标签的一部分.
即使我将视口设置为以下特定宽度<head>:
<meta name="viewport" content="width=1100, initial-scale=1">
该网站扩展到1100px,但仍然有超过1100的空白.
我错过了什么？如何将视口保持为1100并切断溢出？
我正在使用此脚本来显示和隐藏模态视图,但是我想在打开模态视图时禁用主体上的滚动,并在关闭时禁用它.
我试图修改JS代码,但它工作但它打破了开始动画.这是修改后的代码:
(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
bodyTag = document.querySelector( 'body' ),
closeBttn = overlay.querySelector( 'button.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) { …我正在创建这个网站,当你点击标题第二行最右端的链接时,模态窗口会显示嵌入的youtube视频.
当我滚动模态时,BODY也会滚动,我想停止它.我怎么能这样做？
将非常感谢帮助!感谢您的时间.
我有以下 jQuery 代码来显示我的 asp.net MVC 核心 Web 应用程序中的模式弹出窗口：
$(document).ready(function () {
$(function () {
$.ajaxSetup({ cache: false });
$(document).on('click', 'button[data-modal]', function (e) {
$('#myModalContent').css({ "margin": "5px", "max-height": screen.height * .82, "max-width": screen.height * .82, "overflow-y": "auto" }).load($(this).attr("data-url"), function () {
$('#myModal').modal({
height: 1000,
width: 2200,
resizable: true,
keyboard: true,
backdrop: 'static',
draggable: true
}, 'show');
});
return false;
});
});
});
以及以下 HTML：
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
现在，模态弹出窗口将呈现一个局部视图，当从普通 Windows 机器访问时，它将显示一个水平工具栏（因为局部视图有很多水平内容），但是如果我在 …
我正在使用Bootstrap v3.0.2.想要在模态打开时禁用背景滚动.我试过了:
.modal-open {
overflow: hidden;
}
但它没有用.我发现这个问题的解决方案是:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
但是position: fixed;在打开和关闭模态时,在页面底部的铬(小于100%视图)和大显示(在100%视图中)产生额外的空白区域.如何摆脱它？(我的模态包含可滚动字段)
单击图像会显示一个长的滚动模式。问题是，如果您在模式中滚动，也会滚动模式的背面。你如何解决它？
模态是一个组件。这是我的代码：
Carousel.vue
<template>
<div>
<div v-for="(item, index) in photos" :key="index">
<div @click="imgClick(item)" style="cursor:pointer;">
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="item.show = false">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
</div>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
props: {
items: { type: Array, default: () => [] }
},
data() {
return {
photos: {}
}
},
created() {
this.photos = this.items.map(item => {
return { ...item, show: false }
})
},
methods: {
imgClick(item) { …我正在开发具有可滚动内容的弹出窗口（类似于Facebook的通知弹出窗口）。
当前，当弹出窗口具有焦点并且用户滚动其内容滚动时，一切都很好，直到到达底部并且父级开始滚动为止（请参见CodePen上的问题示例）。
我试图防止父级滚动到达子级的底部时，如果可能的话，只想使用CSS滚动！
我已经使用CSS编写了自己的模态类，并在我的应用程序中成功使用了它。但是我面临的问题是当覆盖层打开时，我仍然可以滚动背景内容。打开模态/叠加时如何停止滚动背景内容？
这是我的模式，它在叠加层的顶部打开
<div>
<div className="overlay"></div>
{this.props.openModal ?
<div>
<div className="polaroid sixten allcmnt_bg_clr horiz_center2">
{}
<div className="mobile_header">
<PostHeader/>
</div>
<div className="mobile_renderPost">
{ this.renderPostType() }
</div>
<div className="mobile_post_bottom"></div>
</div>
</div> : null}
</div>
我的叠加CSS
.overlay {
background-color: rgba(0, 0, 0, .70);
position: fixed;
width: 100%;
height: 100%;
opacity: 1;
left: 0;
right: 0;
-webkit-transition: opacity .25s ease;
z-index: 1001;
margin: 0 auto;
}
我在移动屏幕上显示一个比屏幕大小更长的对话框(因此它会滚动).
这是问题所在:当你滚动到对话框的底部时(我碰巧使用的是Bootstrap 3),我希望它能够停止.相反,它开始滚动底层的身体.我已经试过这就是被认为在一切这个推荐的解决方案,它仍然不会再用的工作!
这是关于JSbin问题的现场演示,为您带来观赏乐趣
注意:要重现此问题,请使用移动设备(任何移动设备)访问该设备,并尝试滚动浏览对话框的末尾.在Android和iPhone上尝试过它 - 对两者都不起作用.
谢谢!