Question

我正在组织一个活动邀请电子邮件，我在确保在视口中间出现展开的框时遇到了一些困难。我有很多地方（19）举行活动，我希望与会者点击一个位置，打开一个表格供他们完成。问题是扩展形式跳转到页面顶部并被顶部横幅遮挡。

我研究了这个，但没有找到解决方案。我是一个相当陌生的JavaScript（我来自设计背景）。如果有人可以提供帮助（或指导我在哪里寻找解决方案），请提前感谢所有人。

我已经复制了html代码。我不确定这会有多大用处。我可以在github上发布所有代码的链接，但我不认为这是一个好习惯吗？

＆＃13;

<!-- 1. Newcastle -->
<div class="set" id="newcastle">
  <a href="#event_table_new">
    Newcastle <span class="light">(Tuesday 12 April)</span>
    <i class="fa fa-plus"></i>
  </a>
  <div class="text">
    <p>Jesmond Dene House, Jesmond Dene Road
    <br>Newcastle-upon-Tyne NE2 2EY</p>

    <div class="col-sm-3 radio-buttons" id="event_table_New">
      <!-- // Radio buttons -->
      <form>
        <label class="session">Session</label>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadiosNew1" value="option1"> Morning
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadiosNew2" value="option2">Afternoon
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadiosNew3" value="option3">All-day
          </label>
        </div>
      </form>
    </div>
    <!-- col-sm-3 -->

    <div class="col-sm-9 form-group">
      <form>
        <div class="form-group">
          <label for="exampleInputName_New">Name</label>
          <input type="text" class="form-control" id="exampleInputName_New" placeholder="Name">
        </div>
        <div class="form-group">
          <label for="exampleInputCompany_New">Company</label>
          <input type="text" class="form-control" id="exampleInputCompany_New" placeholder="Company">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail_New">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail_New" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputTelephone_New">Telephone</label>
          <input type="number" class="form-control" id="exampleInputTelephone_New" placeholder="Telephone">
        </div>
        <div class="form-group">
          <label>Dietary requirements</label>
          <textarea class="form-control" rows="4"></textarea>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <!-- End of sm 9 col -->
  </div>
  <!-- End of text class -->
</div>
<!-- End of Newcastle set class -->

＆＃13;

确保在视口中显示扩展表单

0 个答案: