我有以下模态:
<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
当我单击链接以启动模式时,somepage.htm的内容从模式中溢出,并且模式上没有滚动条吗?
怎么会这样呢?
最佳答案
假设您有2个页面,index.htm
和somepage.htm
您在页面index.htm
中有模态,并且想在模态中显示somepage.htm
。然后
index.htm页面代码将是
<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog " role="document">
<div class="modal-content">
//Here you can show the content from `somepage.htm`
</div>
</div>
</div>
并且somepage.htm页面内容将是
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
//Put the page content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
这将解决问题somepage.htm从模态溢出并且模态上没有滚动条的问题
替代解决方案
OP在注释中要求将远程页面内容加载到
modal-body
中,以上代码示例是bootstrap v3 +的默认行为,其中模态忽略modal-body
并且始终将远程内容加载到<div class="modal-content">
中,即使<div class="modal-body">
存在于<div class="modal-content">
中。要解决此问题,并确保将远程内容加载到
<div class="modal-body">
使用引导模态events
请勿在模式调用按钮或链接中使用
href
或remote
因此模式调用按钮或链接将是
<a datalink="somepage.htm" data-toggle="modal" data-target="#extLinkModal" class="btn btn-primary">
其中
href
更改为datalink
或可以使用任何单词,但不能使用href
或remote
,否则模式将检测它为远程内容并忽略<div class="modal-body">
并将内容加载到<div class="modal-content">
模态HTML
<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
//Remote Page Content loads here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
和JS
<script>
$(document).ready(function() {
$("#extLinkModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("datalink"));
});
});
</script>