Make Modal not scroll to bottom of page - php

Question

How would I do it so when my model opens, it doesn't automatically scroll me all the way to the bottom of the page
<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>
and also how would I go about aligning the yes and no boxes shown below to the right that say YES and NO without the text affecting them like when I type more text, the box expands
<div class="modal" id="confirm" aria-hidden="true">
<div class="modal-dialog">
<div class="contentHeader headerRed">
<div class="inside">
FOOKIN MODAL BOX M8
</div>
</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/><div class="thebutton yes">YES</div><br><br><br> <div class="thebutton no">NO</div>
</div>
</div>

Answer 1

For positioning the modal, you are using:
.modal-dialog {
top: -100%;
}
Try adjusting that.
As far as the buttons, remove the <br>'s and then either float the buttons or change their display to inline-block.