Question

当一个jQuery模态已经加载了......你怎么做到这样页面滚动条滚动模态而不是页面？

在123reg ... https://www.123-reg.co.uk/order/domain?domain=somedomain.co.uk&is=1上查看此示例，然后点击＆＃39; .co.uk＆＃39;然后滚动。

如果您关闭模式并点击＆＃39; .uk.com可用＆＃39;模态更短，页面滚动条被禁用，直到关闭模态。

有人能举例说明这是如何运作的吗？

提前致谢！：）

Answer 1

在主模式容器类

中使用position:absolute代替position:fixed

.modal_name {       
    position: absolute;        
}

Answer 2

只需将此样式添加到样式表即可：

.modal-open {
   overflow: inherit; 
}

Answer 3

这是因为“modal-scrollable”类应用于modal-popup的父div。这个“模态可滚动”类的样式为“overflow：auto和overflow：y-scroll”。如果删除这些样式，页面滚动条将不再存在，您将无法向下滚动模式弹出窗口。模态组大于身高，所以溢出风格在这里起作用。对于第二个弹出窗口，它不大于身高，因此滚动不会出现在那里。 'overflow'样式只适用于元素超出指定限制的地方（如div有max-height：450px，当div中的内容使其达到450 px以上时，它将显示滚动。条件是溢出：自动或溢出：添加y滚动）。

你也可以通过jquery来处理这些事情。为了让你更好地理解我已经创建了两个函数ShowModal和HideModal： -

 <div class="modal" id="popupModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header ">                  
                <button type="button" class="close1" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <p>Something to be written<p>          
        </div>
    </div>
</div>

脚本

function ShowModal()
{
$("#popupModal").modal('show'); //this will show the page scroll bar for modal popup only . This is handled by bootstrap itself
$('body').css({overflow:'hidden'); // this will hide the body scroll bar 
}

function HideModal(){
$("#popupModal").modal('hide'); 
$('body').css({overflow:'auto'}); //this will show the scroll bar 
}

希望我的回答能帮到你!!

jQuery模式滚动页面滚动条

3 个答案: