gpt4 book ai didi

css - 如何使模态按钮出现在模态主体内?

转载 作者:行者123 更新时间:2023-11-28 06:00:27 26 4
gpt4 key购买 nike

如何使模态按钮(“确定”、“取消”等)出现在模态主体内而不是页脚内?因为我将照片设置为背景,所以我希望按钮漂浮在这张照片上方。

<div class="container">
<div class="modal1 fade"
id="XXX"
tabindex="-1"
aria-labelledby="XXX"
role="dialog"
aria-hidden="true">
<div class="modal_wrapper1">
<div class="modal-dialog1">
<div class="modal-body">
<img class="img-responsive" src="Ximage" alt="image" />
<a href="" target="_blank" class="btn">button!</a>
<a href="" type="button" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
</div>

.modal1{
width: 100%;
position: fixed;
text-align: center;
margin: 0px auto; top: 0px;
left: 0px; bottom: 0px; right: 0px;
z-index: 1050;
}
.modal_wrapper1{
display: table;
overflow: auto;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch; outline: 0;
text-align: center;
margin: 0px auto;
}
.modal-dialog1{
margin-top: 0px;
display: table-cell;
vertical-align: middle;
margin: 0px 20px;
}

最佳答案

我在同一部分使用了相同的东西来显示按钮,上面放置了背景和控件,您可以在您的页面中尝试类似的方法。它对我来说很好用。您可以更改背景以应用于您的部分而不是正文。

    <body style="background-image: url('../../abc.jpg'); align-content:center;">
<header style="height:200px">
<section>
<div class="container">
<div class="row" >
<div class="col-lg-5">
</div>
<div class="col-lg-2 text-center">
<div id="login" name="loginForm" >
<input ........ /><br /><br />
<input type="submit" class="btn btn-success" value="Continue" />
</form>
</div>
<div class="col-lg-5">
</div>
</div>
</div>
</section>
</body>

如果您正在使用 bootstrap,那么最好使用默认的 css 而不是对其进行过多修改,因为当屏幕具有不同的分辨率时它会影响控件的放置。

关于css - 如何使模态按钮出现在模态主体内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36786451/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com