unable to see the popup in my modal

Question

I want my popup as mention in my link below

HERE IS MY LINK I am getting my popup but with dark background and it doesn't seems good to me. I am not getting my desire result. Here is my code:

Html

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"id ="submit">
     Submit Replication
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
    <h4 class="modal-title" id="myModalLabel">Replication Slip</h4>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

css

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}

.modal-backdrop.fade
{
opacity: 0;
}

.modal-backdrop,
.modal-backdrop.fade.in
  {
  opacity: 0.8;
 filter: alpha(opacity=80);
   }

.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;
  }

can any one please help with this stuff i'm stuck in this very badly Thank you

[Note] I want mu popup as launch demo present in the link

**my output*

Answer 1

Try this http://jsfiddle.net/JEBg8/

Here is code:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"id ="submit">
     Submit Replication
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
    <h4 class="modal-title" id="myModalLabel">Replication Slip</h4>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS:

#myModal{

    display:none;
}

Answer 2

Check This code out :

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"     aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>