带有悬在边缘的按钮（img）的引导模式答案

【问题标题】：Bootstrap Modal with button(img) that hangs over the edge带有悬在边缘的按钮（img）的引导模式
【发布时间】：2017-06-27 23:59:26
【问题描述】：

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

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

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

【问题讨论】：

我猜有 overflow: hidden; 应用于模态的 CSS 中的某处，它隐藏了任何溢出。如果您可以使用不同的模式，请使用 fancyapps.com/fancybox

标签： css gwt twitter-bootstrap modal-dialog gwt-bootstrap

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

下面这行 css 就可以解决问题：

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

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

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

【讨论】：