css - Bootstrap Modal 带有悬在边缘的按钮(img)

Question

我试图让一个关闭按钮“挂”在我的模式的一 Angular ，像这样:http://i.imgur.com/3rminEM.png

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

有什么办法吗？也许是 Modal 本身的背景图片？替代模态？我将 GWT 与 gwt-bootstrap 一起使用，所以希望有一些仅 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/