title: Make Modal not scroll to bottom of page
body: <p>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</p>
  
  <pre><code>&lt;style&gt;
  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;
  }&lt;/style&gt;
  </code></pre>
  
  <p>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
  <a href="https://i.stack.imgur.com/5nDxq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5nDxq.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="modal" id="confirm" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
  &lt;div class="contentHeader headerRed"&gt;
                          &lt;div class="inside"&gt;
                              FOOKIN MODAL BOX M8
                          &lt;/div&gt;
  &lt;a href="#" class="btn-close" aria-hidden="true"&gt;&lt;/a&gt;  
  &lt;/div&gt;
  &lt;img src="https://avatar-retro.com/habbo-imaging/avatarimage?figure=&lt;?php
  echo mysql_result(mysql_query("SELECT look FROM users WHERE id = '" .    $_SESSION['user']['id'] . "'"), 0);
  ?&gt;&amp;direction=2&amp;head_direction=3&amp;gesture=sml&amp;action=wav" align="left"&gt;
  &lt;br&gt;
  Hey there &lt;b&gt;{username}&lt;/b&gt;&lt;br&gt;Are you sure you want to&lt;br&gt; sign out of the   hotel??
  &lt;br/&gt;&lt;a href="#confirm"&gt;&lt;div class="thebutton yes"&gt;YES&lt;/div&gt;&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;  &lt;a href="#"&gt;&lt;div class="thebutton no"&gt;NO&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>