Question

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

我试过给角落图像显示：内联;浮动：右边;和一些相对定位，但没有任何东西显示在Modal的内部区域之外（有时Modal获得滚动条以在滚动时显示图像）。我也尝试过增加z-index，但没有用。

有没有办法做到这一点？也许莫代尔本身的背景图片？替代模式？我正在使用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/

Answer 2

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

Answer 3

以下css行将解决这个问题：

var buildClient = new BuildHttpClient(new Uri(collectionURL), new 
VssCredentials(true));
var res = await buildClient.QueueBuildAsync(new Build
            {
                Definition = new DefinitionReference
                {
                    Id = targetBuild.Id
                },
                Project = targetBuild.Project,
                SourceVersion = ChangeSetNumber,
                Parameters = buildArg

            });
            return res.Id.ToString();

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

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

Bootstrap Modal，按钮（img）悬挂在边缘上

3 个答案: