Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 仅在模式中隐藏滚动,但仍可在模式中滚动_Jquery_Html_Css_Modal Dialog - Fatal编程技术网

Jquery 仅在模式中隐藏滚动,但仍可在模式中滚动

Jquery 仅在模式中隐藏滚动,但仍可在模式中滚动,jquery,html,css,modal-dialog,Jquery,Html,Css,Modal Dialog,我正在创建一个包含大量信息的模式,我只想在模式中隐藏scollbar,不在主体中,但在模式中仍然可以滚动 我试过了 ::-webkit-scrollbar { width: 0px; background: transparent; } 但它也隐藏了身体中的脊柱 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> &

我正在创建一个包含大量信息的模式,我只想在模式中隐藏scollbar,不在主体中,但在模式中仍然可以滚动

我试过了

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
} 
但它也隐藏了身体中的脊柱

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" style='overflow-y: scroll; height:350px;'>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

引导示例
模态示例
开放模态
&时代;
模态头
Lorem ipsum dolor sit amet,是一位杰出的献身者。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Nam cursus nisl vitae ex sodales pellentesque。在accumsan nibh的Fusce,blandit aliquam felis。由亚库利斯植物制成的元素库拉比图尔(Curabitur elementum ac ex-sed iaculis)。Aliquam vel hendrerit orci,在blandit metus。他是世界上最有效率的人。在埃吉特·尼布(eget-nibh)的一篇文章中,我们看到了生命的奥秘。整数sapien tortor,奥古斯a的弗林利亚,奥古斯的波苏尔·阿利夸姆。做前庭前庭外外翻。狮子座的射手座的人不在同一个地方。在urna ex中,门位于适当的水平,蜗壳位于东部。我们是临时雇员。普雷森特ipsum lacus、维韦拉ac阿库ac、康莫多tristique velit.


Lorem ipsum dolor sit amet,是一位杰出的献身者。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Nam cursus nisl vitae ex sodales pellentesque。在accumsan nibh的Fusce,blandit aliquam felis。由亚库利斯植物制成的元素库拉比图尔(Curabitur elementum ac ex-sed iaculis)。Aliquam vel hendrerit orci,在blandit metus。他是世界上最有效率的人。在埃吉特·尼布(eget-nibh)的一篇文章中,我们看到了生命的奥秘。整数sapien tortor,奥古斯a的弗林利亚,奥古斯的波苏尔·阿利夸姆。做前庭前庭外外翻。狮子座的射手座的人不在同一个地方。在urna ex中,门位于适当的水平,蜗壳位于东部。我们是临时雇员。普雷森特ipsum lacus、维韦拉ac阿库ac、康莫多tristique velit.


这是JS Fiddel


我希望仅将滚动条隐藏在模式中。

也许您正在寻找类似的内容:

.modal-body{
  height:300px;
  overflow-y:auto;
}

@-moz-document url-prefix() {
   /*firefox*/
   .modal-content {
    overflow: hidden;
   }
   .modal-body{
     margin-right: -16px;
     overflow-y: scroll;
     overflow-x: hidden;
   }
}

.modal-body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
} 
或片段:

。模态体{
高度:300px;
溢出y:自动;
}
@-moz文档url-前缀(){
/*火狐*/
.模态内容{
溢出:隐藏;
}
.模态体{
右边距:-16px;
溢出y:滚动;
溢出x:隐藏;
}
}
.modal body::-webkit滚动条{
宽度:0px;
背景:透明;
}

引导示例
模态示例
开放模态
&时代;
模态头
Lorem ipsum dolor sit amet,是一位杰出的献身者。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Nam cursus nisl vitae ex sodales pellentesque。在accumsan nibh的Fusce,blandit aliquam felis。由亚库利斯植物制成的元素库拉比图尔(Curabitur elementum ac ex-sed iaculis)。Aliquam vel hendrerit orci,在blandit metus。他是世界上最有效率的人。在埃吉特·尼布(eget-nibh)的一篇文章中,我们看到了生命的奥秘。整数sapien tortor,奥古斯a的弗林利亚,奥古斯的波苏尔·阿利夸姆。做前庭前庭外外翻。狮子座的射手座的人不在同一个地方。在urna ex中,门位于适当的水平,蜗壳位于东部。我们是临时雇员。普雷森特ipsum lacus、维韦拉ac阿库ac、康莫多tristique velit.


Lorem ipsum dolor sit amet,是一位杰出的献身者。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Nam cursus nisl vitae ex sodales pellentesque。在accumsan nibh的Fusce,blandit aliquam felis。由亚库利斯植物制成的元素库拉比图尔(Curabitur elementum ac ex-sed iaculis)。Aliquam vel hendrerit orci,在blandit metus。他是世界上最有效率的人。在埃吉特·尼布(eget-nibh)的一篇文章中,我们看到了生命的奥秘。整数sapien tortor,奥古斯a的弗林利亚,奥古斯的波苏尔·阿利夸姆。做前庭前庭外外翻。狮子座的射手座的人不在同一个地方。在urna ex中,门位于适当的水平,蜗壳位于东部。我们是临时雇员。普雷森特ipsum lacus、维韦拉ac阿库ac、康莫多tristique velit.



Hi,模式没有滚动条。即将到来的滚动条是身体的一部分。thanks@KoshVery在Firefox中更新并测试:)感谢您通知跨浏览器问题