使 Modal 不滾動到頁面底部

Question

我該怎么做，這樣當我的模型打開時，它不會自動將我一直滾動到頁面底部

<style>
body {
color: #333;
height: 80em;
z-index: 1000;
}
.wrap {
padding: 40px;
text-align: center;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
padding: 8px;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
.thebutton {
display: inline-block;
color: #fff!important;
padding: 6px 12px!important;
border-radius: 5px;
box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3);
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
margin-top: 3px;
font-size: 11px;
text-shadow: 0 1px #333;
font-weight: 700;
margin-right: 5px
}
.yes {
background-color: #00813e;
border-color: #8eda55;
float: right
}
.yes:hover {
background-color: #00ab54;
border-color: #b9f373
}
.no {
background-color: #c6165f;
border-color: #f57aad;
float: right
}
.no:hover {
background-color: #d45087;
border-color: #f89dc2
}
#close {
display: none;
}</style>

以及我將如何將下面顯示的是和否框對齊到右側，它們說是和否而不影響它們，就像當我輸入更多文本時一樣，框會擴展

<div class="modal" id="confirm" aria-hidden="true">
<div class="modal-dialog">
<div class="contentHeader headerRed">
                        <div class="inside">
                            FOOKIN MODAL BOX M8
                        </div>
<a href="#" class="btn-close" aria-hidden="true"></a>  
</div>
<img src="https://avatar-retro.com/habbo-imaging/avatarimage?figure=<?php
echo mysql_result(mysql_query("SELECT look FROM users WHERE id = '" .    $_SESSION['user']['id'] . "'"), 0);
?>&direction=2&head_direction=3&gesture=sml&action=wav" align="left">
<br>
Hey there <b>{username}</b><br>Are you sure you want to<br> sign out of the   hotel??
<br/><a href="#confirm"><div class="thebutton yes">YES</div></a><br><br><br>  <a href="#"><div class="thebutton no">NO</div></a>
</div>
</div>

Answer 1

為了定位模態，您正在使用：

.modal-dialog {
    top: -100%;
}

試着調整一下。

至於按鈕，刪除<br> ，然后float按鈕或將其display更改為inline-block 。