带按钮的Bootstrap Modal (Img)挂在边缘

Question

我正在尝试让关闭按钮“挂”在我的模式的角落，就像这样：http://i.imgur.com/3rminEM.png

我试过给角图像显示:内联；浮动:右；以及一些相对的位置，但在Modal的内部区域之外什么都不显示(有时Modal在滚动时会获得一个滚动条来显示图像)。我也尝试过增加z-index，但没有效果。

有没有办法做到这一点？也许是Modal本身的背景图像？另一种情态动词？我正在使用带有gwt-bootstrap的GWT，所以希望有一些只有css的解决方案。

Answer 1

以下是模态标头的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/

Answer 2

你说你试过内联和相对定位。你有没有试过对它进行绝对定位？top: 0；right: 0；如果你已经尝试过，你是否介意发布一些代码或工作示例，它将帮助你更快地获得和回答。

Answer 3

下面这行css代码可以解决这个问题：

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

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

.modal-body { min-height: 350px; overflow-y: visible !important; }