1

我正在尝试在模态框的角落“挂”一个关闭按钮，如下所示：http: //i.imgur.com/3rminEM.png

我试过给角落图像 display:inline;float:right; 和一些相对定位，但在模态的内部区域之外没有任何显示（有时模态会在滚动时获得一个滚动条来显示图像）。我也尝试增加 z-index，但无济于事。

有没有办法做到这一点？也许是模态本身的背景图像？替代模态？我正在将 GWT 与 gwt-bootstrap 一起使用，所以希望有一些仅限 css 的解决方案。

4

3 回答 3

2

这是模态标题的 HTML 标记

<div class="modal-header">
    <button type="button" class="close mynewclassclose" data-dismiss="modal" aria-hidden="true">
       <img src="http://expediaholiday.d.seven2.net/_images/modal_close.png"/>
    </button>
    <h3 id="myModalLabel">Modal Heading</h3>    
</div>/

我添加了一些新类.mynewclassclose，只是为了覆盖此按钮的默认 Twitter Bootstrap 设置。我添加了关闭按钮的图像。（你可以使用背景图片代替这个，没关系。但在这种情况下，你必须在 CSS 中定义宽度和高度）。

这是CSS

.modal-header {
    position: relative;
}

.mynewclassclose {
    position: absolute;
    margin: 0;
    top: -23px; /* half height of "X" image, just for nice placing*/
    right: -23px; /* half width of "X" image, just for nice placing*/
    opacity: 0.9;
}

.mynewclassclose:hover {
    opacity: 1;
}

这是工作演示：http: //jsfiddle.net/Aqydb/1/

于 2013-04-13T01:09:06.550 回答
0

你说你已经尝试过内联和相对定位。你试过绝对定位吗？顶部：0；右：0；如果您尝试过，您介意发布一些代码或工作示例，它将帮助您更快地获得和回答。

于 2013-04-12T17:48:02.133 回答
0

下面的 CSS 行可以解决问题：

.modal-body { overflow-y: visible !important; }

或者，您可能需要最小高度：

.modal-body { min-height: 350px; overflow-y: visible !important; }
于 2017-06-27T15:59:26.343 回答