Javascript 引导模式不使用视差功能

我已经在视差特性上创建了一个引导模式，它不允许我在没有透明背景的情况下打开模式中的联系人窗体。非常感谢您的帮助！访问我的网站，看看自己，这是一个很难弄清楚！附言：你现在正在找那本书！纽扣

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

将从放置模态的位置获取模态，并将其附加到

，该模态应放在第一位

---

---

另外，由于脚本加载不当，您的网站上出现了几个JavaScript错误。您应该专业地查看您的“专业网站”

我感谢您的反馈，并感谢您的回答！我只做了一年，希望你能原谅我的错误。@Joshua，当我告诉你我的错误时，我不是在判断，而是在帮助你（或者至少是试图）。事实上，从我的角度来看，你的网站在很多方面都不符合“专业”标准，但详细说明这些标准在这里是不合适的。另一方面，我也不会忽视你将其命名为“专业”的可能性，因为它是一种工具，可以让你锻炼你的专业，这似乎不是网络开发。如果你想通过电子邮件通信，我会很乐意倾听我搞错的网站的所有细节和方面。它仍然是一个测试版网站，我还没有解决所有的问题。

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

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