如何在Bootstrap模态的背景中放置项目？

Question

我正在使用常规的Bootstrap 3模式，但想稍微调整一下。

我想在左上角放置一个徽标，在背景的右上角放置关闭按钮，如下所示：

我一直在玩一些CSS伪选择器来插入内容，但没有任何效果。 也许你们其中一个人有个主意。

提前致谢。

Answer 1

您可以在常规HTML上插入这些元素以使用模态，并使用类名pull-right和pull-left：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
   <img class="pull-left" src="YourLogo.png">
   <div class="pull-right">Close-Ico</div>
   <div class="modal-dialog">
      <div class="modal-content">
        ....

请查看此示例 http://www.bootply.com/AQafF1LaVw

Answer 2

您可以在主体中放置一个新的隐藏元素，并仅在显示背景时显示它。只有当模态打开时，.modal-open才会应用于body标签。

.modal-open-inner {
    display:none;
}

.modal-open .modal-open-inner {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
}

http://codeply.com/go/HdMsy0WdWS