Question

Testing the third iteration of my professional website

我在视差功能上创建了一个自举模式，不允许我在模态中打开联系表单，而不需要使用透明背景。任何帮助解决这个问题非常感谢！访问我的网站，亲眼看看，这是一个很难理解的问题！ PS：你正在寻找现在的书！的按钮。

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'))

将从您放置它的位置取出您的模态并将其附加到<body>，它应该放在首位。

作为旁注，由于脚本加载不当，您的网站上存在多个JavaScript错误。您应该专业地查看＆＃34;专业网站＆＃34; 。

Bootstrap Modal不支持视差功能

1 个答案: