Question

以下是网站：http://www.hotelsunlimited.tech/ 这是我认为有问题的代码。问题是在小屏幕上，点击请求演示，字段不可点击... 我想问题是关于z-index的问题。我尝试了几乎所有的帖子/方法，但无法解决它。

<div id="requst_demo" class="modal fade in" role="dialog" style="display: block; padding-left: 0px;">
            <div class="modal-dialog">
                <!-- modal content start -->
                <div class="modal-content">
                    <div class="modal-header bg-gray">
                        <button type="button" class="close" data-dismiss="modal">×</button>
          <script type="text/javascript">var submitted=false;</script>
          <h5 class="modal-title text-center" id="requestDemoDisplay"><!-- <i class="fa fa-lock fa-fw"> --> Request Demo</h5>
         </div>
        <div class="modal-body_bg col-md-12">
        <div class="contact contact-us-one">
        <div class="col-sm-12 col-xs-12 text-center mb20">
        <h4 class="pb25 bb-solid-1 text-uppercase">
        Help us to Reach You
            <small class="text-lowercase">Please complete the form and we will get back to you.</small>
        </h4>
        </div>
       <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){$('#inputInfo').hide();$('#requestDemoDisplay').hide();$('#successMessage').show();}"> </iframe>
      <form name="contactForm" id="ss-form" action="https://docs.google.com/forms/d/17hNuB00okyMsEvvNrirQCZzZtwEEGmF1trFfBIwvKgI/formResponse" target="hidden_iframe" onsubmit="submitted=true" method="POST">
      <div id="inputInfo">
      <!-- fullname start -->
      <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="form-group">
      <input type="text" name="entry.301789256" id="entry_301789256" class="input-md input-rounded form-control" placeholder="Fullname" maxlength="100" required="">
       </div>
       </div>
       <!-- fullname end -->
<!-- email start -->
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
    <input type="email" name="entry.1752605527" id="entry_1752605527" class="input-md input-rounded form-control" placeholder="Work Email-ID" maxlength="100" required="">
</div>
</div>
<!-- email end -->
    <!-- textarea start -->
<div class="col-sm-12">
<textarea class="form-control" name="entry.1630854875" id="entry_1630854875" placeholder="Any Question" rows="7" required=""></textarea>
</div>
<!-- textarea end -->

<!-- button start -->
<div class="col-sm-12 mt10 text-center">
<button type="submit" value="Submit" name="sendMessage" id="sendMessage" class="button button-md button-block button-grad-stellar">Send Message</button>
                </div>
                <!-- button end -->
                  </div> <!---end of inputInfo-->
           <div id="sendingMessage" class="statusMessage sending-message">
           <p>Sending your message. Please wait...</p>
           </div>
           <div id="successMessage" class="statusMessage success-message">
           <p>Thanks for sending your message! We'll get back to you shortly.</p>
           </div>
           <div id="failureMessage" class="statusMessage failure-message">
           <p>There was a problem sending your message. Please try again.</p>
            </div>
           <div id="incompleteMessage" class="statusMessage">
           <p>Please complete all the fields in the form before sending.</p>
                    </div>
            </form>
         <div id="successMessage2" class="statusMessage success-message">
         <p>Thanks for sending your message! We'll get back to you shortly.</p>
                                        </div>
                        </div><!-- div contact end -->
                    </div><!-- col end -->
                </div>
                <!-- modal content end -->
            </div>
        </div>

Answer 1

我在检查员中应用了以下更改并且他们完成了这个操作，如果您遇到问题，请告诉我。

添加以下css

.modal-dialog, .modal-content{height: 100%;}

以上行修复了外观，但没有修复文本输入问题。以下行将修复输入框无响应

#inputInfo .col-sm-12{clear: both;}

这是因为包含下面的textarea的列超出了其限制以覆盖前两个输入字段。

手机上的表单字段不可点击

1 个答案: