Bootstrap Modal arbeitet nicht mit Parallaxe Funktionen

Question

Testing the third iteration of my professional website

ich eine Bootstrap-modal über eine Parallaxe-Funktion erstellt haben, die nicht zulassen, dass mir das Kontaktformular im Modal zu öffnen, ohne auf einen transparenten Hintergrund zurückgreifen. Jede Hilfe, die das repariert, wird sehr geschätzt! Besuchen Sie meine Website und sehen Sie selbst, das ist schwer zu sagen! PS: Du suchst das Buch jetzt! Tasten.

HTML code: <div class="bgimg-2 img-responsive"> 

 <div class="container"> 

     <span class="border btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Book Now!</span> 
</div> 


     <!-- Modal --> 
     <div id="myModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog modal-lg"> 

<!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Contact Form</h4> 
      </div> 

       <div class="modal-body"> 
       <div class="container-fluid"> 

     <div class="row"> 

      <div class="col-lg-8 col-lg-offset-2"> 

       <p class="lead">Hourly Consulting Rate: $40 - $120/h</p> 


       <form id="contact-form" method="post" action="contact.php" role="form" 
       data-toggle="validator"> 

<div class="messages"></div> 

<div class="controls"> 

    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="form_name">Firstname *</label> 
       <input id="form_name" type="text" name="name" class="form-control" placeholder="Your firstname! *" required="required" data-error="Firstname is required."> 
       <div class="help-block with-errors"></div> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="form_lastname">Lastname *</label> 
       <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Your lastname! *" required="required" data-error="Lastname is required."> 
       <div class="help-block with-errors"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="form_email">Email *</label> 
       <input id="form_email" type="email" name="email" class="form-control" placeholder="Your email! *" required="required" data-error="Valid email is required." 
       pattern="[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*"> 
       <div class="help-block with-errors"></div> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="form_phone">Phone</label> 
       <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Your phone number!"> 
       <div class="help-block with-errors"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="form-group"> 
       <label for="form_message">Message *</label> 
       <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea> 
       <div class="help-block with-errors"></div> 
      </div> 
     </div> 
     <div class="col-md-12"> 
      <input type="submit" class="btn btn-success btn-send" value="Send message"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p class="text-muted"><strong>*</strong> These fields are required.</p> 
     </div> 
    </div> 
</div> 

  </div> 

     </div> 

    </div> 

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

    </div> 
    </div> 
    </div> 
    </div> 
</div> 

body, html { 
     height: 100%; 
     margin: 0; 
     font: 400 15px/1.8 "Lato", sans-serif; 
     color: #777; 
    } 

    img.headshot { 
     margin-right: auto; 
     margin-left: auto; 
    } 

    .bgimg-1, .bgimg-2, .bgimg-3 { 
     position: relative; 
     opacity: 0.65; 
     background-attachment: fixed; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 

    } 
    .bgimg-1 { 
     background-image: url("images/building1.gif"); 
     min-height: 100%; 
    } 

    .bgimg-2 { 
     background-image: url("images/cityscape1.gif"); 
     min-height: 400px; 
    } 

    .bgimg-3 { 
     background-image: url("images/TheBay.gif"); 
     min-height: 400px; 
    } 

    .caption { 
     position: absolute; 
     left: 0; 
     top: 50%; 
     width: 100%; 
     text-align: center; 
     color: #000; 
    } 

    .caption span.border { 
     background-color: #111; 
     color: #fff; 
     padding: 18px; 
     font-size: 25px; 
     letter-spacing: 10px; 
    } 

    h3 { 
     letter-spacing: 5px; 
     text-transform: uppercase; 
     font: 20px "Lato", sans-serif; 
     color: #111; 
    } 

    div.bgimg-2-still { 
     background-image: url("images/building1.jpg"); 
     width: 100%; 
     height: auto 
    } 

Answer 1

$(window).load($('#myModal').appendTo('body')) 

Ihre mo nehmen dal von wo Sie es platziert haben und an <body> anhängen, wo es an erster Stelle hätte platziert werden sollen.

---

Als Randbemerkung, haben Sie mehrere JavaScript-Fehler auf Ihrer Webseite durch unsachgemäße Beladung von Skripten. Sie sollten einen professionellen Blick auf Ihre "professionelle Website" haben.