如何使模态按钮(“确定”、“取消”等)出现在模态主体内而不是页脚内？ 因为我将照片设置为背景，所以我希望按钮漂浮在这张照片上方。
<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/