は、モーダルは、私は私のモデルが開いたときにそれを行うだろうどのページ

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> 

の底に私のすべての方法をスクロールしないともどのように私は希望YESを言って右には下記はいといいえボックスを合わせて行くとNO、私はより多くのテキストを入力するときにそれらが好きな影響を与えるテキストなしで、ボックスは、モーダルを位置決めするための

<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に変更してください。