title: Twitter Bootstrap Modal: Half off screen
body: <p>I have a modal and when I launch the modal it's appearing half cut at the top of the page so it can't be used, as shown in the picture :
  <a href="http://i.imgur.com/7PcLQCS.png" rel="nofollow">http://i.imgur.com/7PcLQCS.png</a></p>
  
  <p>As you can see from the image, it's half off of the screen!</p>
  
  <h2>Here's the code:</h2>
  
  <pre><code>   //The button that kick starts the modal magic
  &lt;div class="left-trigger" &gt;
     &lt;button class="btn btn-blue" data-toggle="modal" data-target="#supportModal" type="button"&gt;Support&lt;/button&gt;
  &lt;/div&gt;
  //The modal itself (It's just a series of fields atm for testing :3 )
  &lt;div class="modal-scrollable hide" style="z-index: 10050;"&gt;
     &lt;div id="supportModal" class="modal hide fade modal-overflow in" tabindex="-1" data-width="760" style="display: block; width: 760px; margin-left: -380px; margin-top: 300px;" aria-hidden="false"&gt;
        &lt;div class="modal-header"&gt;
           &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&lt;/button&gt;
           &lt;h3&gt;Contact Support&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
           &lt;div class="row-fluid"&gt;
              &lt;div class="span6"&gt;
                 &lt;h4&gt;Some Input&lt;/h4&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="span6"&gt;
                 &lt;h4&gt;Some More Input&lt;/h4&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
                 &lt;p&gt;&lt;input type="text" class="span12 m-wrap"&gt;&lt;/p&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
           &lt;button type="button" class="btn blue"&gt;Create My Ticket!&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  //Add a transparent black bg behind the modal... keepin' it pretty!
  &lt;div class="modal-backdrop fade in hide" style="z-index: 10049;"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>CSS for Modal</h2>
  
  <pre><code>.modal {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: -280px;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    *border: 1px solid #999;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    outline: none;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
  }
  
  .modal.fade {
    top: -25%;
    -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
         -o-transition: opacity 0.3s linear, top 0.3s ease-out;
            transition: opacity 0.3s linear, top 0.3s ease-out;
  }
  
  .modal.fade.in {
    top: 10%;
  }
  
  .modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
  }
  
  .modal-header .close {
    margin-top: 2px;
  }
  
  .modal-header h3 {
    margin: 0;
    line-height: 30px;
  }
  
  .modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
    overflow-y: auto;
  }
  
  .modal-form {
    margin-bottom: 0;
  }
  
  .modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
       -moz-border-radius: 0 0 6px 6px;
            border-radius: 0 0 6px 6px;
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
       -moz-box-shadow: inset 0 1px 0 #ffffff;
            box-shadow: inset 0 1px 0 #ffffff;
  }
  
  .modal-footer:before,
  .modal-footer:after {
    display: table;
    line-height: 0;
    content: "";
  }
  
  .modal-footer:after {
    clear: both;
  }
  
  .modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
  }
  
  .modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
  }
  
  .modal-footer .btn-block + .btn-block {
    margin-left: 0;
  }
  </code></pre>
  
  <p>All includes are present and correct as the Modal is fully functional.</p>
  
  <p>Thanks for an help in advance.</p>