它也是吗?
基本上,模式很长,内容很多,只是在底部切断,我想在模态中添加一个滚动条,以便用户可以查看所有被截断的内容
我尝试在模式周围添加滚动条div,但滚动条总是在常规网站上的模型外部结束..这里是代码:
滚动代码:
div.clip_desc {
height: 270px;
overflow-y: scroll;
}
模态代码(包括不会出现在模态中的滚动):
<!-- 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">×</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>
如何在实际模态中添加滚动条?
答案 0 :(得分:0)
是给主div的最大高度然后给溢出:滚动到它!享受
请参阅链接:Modal with scroll
HTML
<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>
CSS
.btn-group {
z-index: 1051;
}
.modal-body{
max-height:200px;
overflow:scroll;
}