我已经创建了模式窗口。你可以看到它在这里工作得很好。http://www.bootply.com/R3JfdhIPwu
现在我需要将页面分为两部分——左边和右边,右边将被固定。
.right-main {
position: fixed;
}
一旦我把这一行添加到css模式窗口中,它就被隐藏了:http://www.bootply.com/aYhMZ3fLlM
有人对它的解决方案,如何使它可见有想法吗?
只需将模态标记移动到.right-main
的外部即可。模态定位通常独立于DOM结构。我建议将它移到DOM的页脚,因为它不需要立即渲染。还要确保它没有嵌套在它可能继承样式的任何元素中(在本例中为.right-main
)。
示例:http://www.bootply.com/QfzMfbTahn
<div class="right-main">
<a class="clickable" style=" text-decoration: none; font-size:100px; border-bottom:2px dashed;" data-toggle="modal" data-target="#basicModal">Test</a>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>