Question

如何使模态按钮（“OK”，“DISMISS”等）出现在模态体内而不是页脚中？因为我将照片设置为背景，所以我希望按钮漂浮在这张照片上方。

<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;
        }

Answer 1

我在同一部分使用相同的东西来显示按钮，背景和控件放在它上面，你可以尝试在你的页面中使用相似的内容。它对我来说很好。您可以更改背景以应用于您的部分而不是身体。

    <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而不是修改它会更好，因为当屏幕有不同的分辨率时它会影响控件的位置。

Answer 2

不要在模态体<img>中添加div，而是将其作为背景图像应用到您的CSS中。

.modal1 .modal-body {
  background:url(Ximage) no-repeat;
  background-size:contain; // or auto or cover, whichever works best.
}

如何在模态体内显示模态按钮？

2 个答案: