[英]bootstrap modal popup is not working properly
在這里,簡單的模式彈出窗口真的很困難。
.modal-backdrop {
background-color: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1040;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.8;
}
.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin-left: -280px;
outline: medium none;
position: fixed;
top: 10%;
width: 560px;
z-index: 1050;
}
.modal.fade {
top: -25%;
transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
border-bottom: 1px solid #EEEEEE;
padding: 9px 15px;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
line-height: 30px;
margin: 0;
}
.modal-body {
max-height: 400px;
overflow-y: auto;
padding: 15px;
position: relative;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
background-color: #F5F5F5;
border-radius: 0 0 6px 6px;
border-top: 1px solid #DDDDDD;
box-shadow: 0 1px 0 #FFFFFF inset;
margin-bottom: 0;
padding: 14px 15px 15px;
text-align: right;
}
.modal-footer:before, .modal-footer:after {
content: "";
display: table;
line-height: 0;
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
html
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>praesent commodo cursus magna, vel scelerisque nisl consectetur et. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>
aenean lacinia bibendum nulla sed consectetur. praesent commodo cursus magna, vel scelerisque nisl consectetur et. donec sed odio dui. donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
cras mattis consectetur purus sit amet fermentum. cras justo odio, dapibus ac facilisis in, egestas eget quam. morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
praesent commodo cursus magna, vel scelerisque nisl consectetur et. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
aenean lacinia bibendum nulla sed consectetur. praesent commodo cursus magna, vel scelerisque nisl consectetur et. donec sed odio dui. donec ullamcorper nulla non metus auctor fringilla.
</p></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
使用上面的模式彈出式CSS,結果如下所示。 有什么建議嗎?
我已經修復了它,請看css,它是關於overlow-y:auto的,順便說一下它在舊的引導程序(2.xx)中看起來會很好
http://jsbin.com/urAYAkOM/21/edit
從.modal-body移除overflow:auto。 它應該是
.modal-body { max-height: 400px; padding: 15px; position: relative; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.