Jquery 是否可以将滚动条添加到模式窗口?

Jquery 是否可以将滚动条添加到模式窗口?,jquery,css,twitter-bootstrap,bootstrap-modal,Jquery,Css,Twitter Bootstrap,Bootstrap Modal,是吗 基本上,模式很长,有很多内容,它只是在底部被切断,我想在模式中添加一个滚动条,这样用户可以查看所有被切断的内容 我尝试在模型周围添加一个滚动条div,但滚动条总是在常规站点上的模型之外结束。。代码如下: 滚动代码: div.clip_desc { height: 270px; overflow-y: scroll; } 模态代码(包括模态中未显示的滚动): &时代;关 高清 2:13 一点培根 当林肯早餐没能挣到一些咸肉时,乔丹向他展示了一点魅力和善良可能会得到的好处 你想干

是吗

基本上,模式很长,有很多内容,它只是在底部被切断,我想在模式中添加一个滚动条,这样用户可以查看所有被切断的内容

我尝试在模型周围添加一个滚动条div,但滚动条总是在常规站点上的模型之外结束。。代码如下:

滚动代码:

    div.clip_desc {
height: 270px;
overflow-y: scroll;
}
模态代码(包括模态中未显示的滚动):


&时代;关
高清
2:13
一点培根

当林肯早餐没能挣到一些咸肉时,乔丹向他展示了一点魅力和善良可能会得到的好处 你想干什么就干什么。

话题


如何在实际模式中添加滚动条?

是为主div设置最大高度,然后设置溢出:滚动到它!享受

见此链接:

html



也许最好不要将滚动条添加到弹出内容中,而是使窗口可以滚动以查看整个弹出内容?看看
<!-- Modal -->
<div class="clip_desc">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      </div>
      <div class="modal-body" style="overflow:hidden;">
        <div class="col-md-12">
          <div class="my-profiletxt"></div>
          <div class="queuepagevideo"></div>
          <div class="col-md-3">
            <div class="qpbox-out">
              <div class="qpposter"><%= image_tag('qpposter.png') %></div>
              <div class="qpimages">
                <%= image_tag('icon.jpg') %>
                <%= image_tag('icon.jpg') %>
                <%= image_tag('icon.jpg') %>
                <%= image_tag('icon.jpg') %>
                <%= image_tag('icon-one.jpg') %>
              </div>
              <div class="qpwatch-box">
                <div class="qphd-txt">HD</div>
                <div class="qpwatch-img"><%= image_tag('watch-img.jpg') %></div>
                <div class="qptxt-new">2:13</div>
              </div>
            </div>
          </div>

          <div class="qpvideotext">
            <p class="qpcliptitle">A Little Bacon</p>
            <p class="qpdesc">
              When Lincoln fails to earn some bacon for breakfast, Jordan shows him that a little charm and kindness may get
              you what you want.
            </p>
            <p class="qptopiclist">
              <span class="qptopic">TOPICS</span> <span class='qptaglist'></span>
            </p>
            <div class="qpbutton-box">
<!--               <a href="#">
                <div class="qpadd-txt">ADD TO QUEUE</div>
              </a> -->
              <a href="#">
                <div class="qpget-txtone">GET STREAM CODE</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
        <div class="container">

        <h3>Modal Example</h3>

        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar odio quis interdum vulputate. Nam porta fermentum risus, sed tempor dolor vehicula vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quis ligula malesuada, auctor velit non, luctus ante. Aliquam egestas condimentum arcu eu condimentum. Nunc orci elit, molestie a ullamcorper sed, elementum at erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc aliquam, tortor quis lacinia consequat, nibh quam bibendum nisi, id condimentum turpis nulla sit amet nunc. Duis eu tristique velit. Curabitur eros dui, sodales vel ipsum sit amet, luctus congue nulla. Praesent vel pharetra mi, non egestas ipsum. Vestibulum quis nulla tincidunt, pretium lacus ultricies, vulputate velit. Sed eleifend justo eu tellus condimentum tempus.

Suspendisse potenti. Donec scelerisque rutrum suscipit. Sed nec aliquet lacus, et volutpat ante. Nulla sed luctus sem. Pellentesque sit amet massa libero. Donec rhoncus risus quis dapibus hendrerit. Nullam urna tellus, fermentum a venenatis a, congue non turpis. Sed adipiscing gravida lorem, eget suscipit erat sodales eu. Phasellus id orci at magna porttitor sollicitudin vel vel enim. Mauris id lacus nec leo facilisis ultrices nec et sapien. Duis congue ac justo et egestas. Integer pretium dignissim malesuada. Proin tempus, enim nec congue sodales, erat diam auctor nisi, eu adipiscing libero nunc vitae nisl. Praesent ultrices risus non venenatis fringilla. Donec dolor augue, pretium in sagittis vitae, tincidunt non velit. Cras eu fermentum est, viverra fringilla mauris.

Ut convallis placerat velit, non consectetur ipsum eleifend id. Fusce posuere, eros vitae interdum dignissim, metus neque tristique nibh, id egestas dolor eros non lacus. Mauris mollis felis tortor, quis lobortis diam venenatis id. Quisque et lobortis diam. Nulla venenatis tempus diam eget euismod. Vestibulum in justo bibendum, laoreet ligula ut, luctus enim. Cras nec iaculis dui, eget vestibulum dui. Praesent at purus et nunc tempor fermentum in a velit. Integer luctus, quam eget tempus luctus, turpis felis varius turpis, mattis tincidunt lacus nunc vel est. In sed magna sed tortor laoreet tempor. Pellentesque eget diam eget nibh vestibulum tempus. Nam commodo ligula nec leo sodales pretium.

Donec scelerisque venenatis iaculis. Nullam urna tellus, facilisis a arcu ut, imperdiet luctus libero. Maecenas suscipit porta est eu mollis. Pellentesque ligula dui, eleifend vitae dolor in, congue varius lacus. Donec pulvinar enim vitae semper scelerisque. Aliquam sapien libero, scelerisque non malesuada at, ullamcorper non augue. Nulla sed est nec nulla ullamcorper elementum. Vivamus massa ligula, ultricies at ullamcorper at, sodales sed turpis. Ut congue, lectus eu accumsan lacinia, tortor velit accumsan augue, vel lacinia velit nisi quis nisl. Praesent mollis ante non risus posuere consectetur. Praesent ipsum quam, scelerisque id est ut, gravida cursus magna. Mauris vel justo eu diam pharetra bibendum.

Mauris dignissim quam consectetur tempor commodo. Donec nec consequat felis. Curabitur in suscipit sem, at aliquet eros. Praesent semper accumsan suscipit. Donec malesuada dolor nec felis fermentum tempor. Nullam vel

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>

    </div>

<style>
    .btn-group {
    z-index: 1051;
}

.modal-body{
    max-height:200px;
    overflow:scroll;
}