jQuery模式滚动页面滚动条

当jQuery模式已经加载......你如何使页面滚动条滚动模态而不是页面？jQuery模式滚动页面滚动条

看123reg ... https://www.123-reg.co.uk/order/domain?domain=somedomain.co.uk&is=1上的这个例子，然后点击'.co.uk taken'然后滚动。

如果您然后关闭模式，然后单击“.uk.com可用”模式更短，页面滚动条被禁用，直到关闭模式。

任何人都可以举例说明这是如何工作的？

在此先感谢！ :)

来源

2014-08-28 David G

告诉我们你有什么试过 – 2014-08-28 09:58:37

我已经尝试过任何atm，我只是看到了这一点，并想知道它是如何工作的。 – 2014-08-28 11:23:45

使用position:absolute，而不是position:fixed在主模式容器类

.modal_name {  
    position: absolute;   
}

来源

2014-08-28 09:37:35 Husen

不要这样做 - 当你向下滚动页面时，你的模态将滚动到窗口的顶部，这不是你想要的'.css（）'方法中缺少大括号'}的大括号 – DoubleA 2014-08-28 16:25:09

只是这种风格添加到您的样式表，它应该工作：

.modal-open { 
    overflow: inherit; 
}

来源

2014-08-28 09:47:26

这是因为“情态的发生-scrollable“类，它应用于模式弹出框的父div处。这个“模态滚动”类具有样式“溢出：自动和溢出：Y轴滚动”。如果删除这些样式，页面滚动条将不再存在，您将无法向下滚动模式弹出窗口。模态斑大于身高，所以溢流式在这里工作。对于第二个弹出窗口，它不比身高高，因此不会在那里滚动。 'overflow'样式只适用于元素超出指定限制的地方（比如div的max-height：450px，当div中的内容超过450 px时，它会显示滚动条件）溢出：自动或溢出：y-scroll被添加）。

您可以通过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 
}

希望我的回答你的帮助！！

来源

2014-08-28 12:02:31

:) – DoubleA 2014-08-28 16:26:08

这只是一个打字错误...谢谢你的方式;） – 2014-08-29 06:47:34

jQuery模式滚动页面滚动条

回答

相关问题