模态不显示按钮

时间:2019-12-04 14:25:27

标签: jquery html bootstrap-modal

第一次张贴广告,请原谅我对传统的任何破坏。

我正在为我的训练营设计一个模态。

  • 模态位于按钮内,单击该按钮即可调出模态。
  • 模态内部是一个需要显示的表单(带有选择标签) 露营者的数量,日期和一个帐篷/ RV按钮。

无论出于何种原因,启动模式时都不会显示任何标签或按钮(仅输入日期和露营者)。最初,我认为这是因为我在同一按钮上有一个工具提示(已删除),但这无济于事。我几乎可以肯定我缺少它的div或结束标签,但是对于我的一生,我找不到它。 使用其他HTML编辑

<span class="navbar-text ml-auto">
  <a role="button" data-toggle="modal" data-target="#loginModal">
    <i class="fa fa-sign-in"></i>Login
  </a>
</span>
</div>
</div>
</nav>
<!-- Modal fade effect will give it a subtle looks -->
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-info text-white">
  <h3 class="modal-title">Reserve a Campsite</h3>
  <button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
  <div class="container-fluid">
      <form>
          <div class="form-group row">
            <label for="numCampers" class="col-sm-6 col-form-label">Number of Campers</label>
            <div class="col">
              <select name="numCampers" class="form-control" id="numcampers">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label for="date" class="col-sm-6 col-form-label">Date</label>
            <div class="col-sm-6 col-form-label">
              <input type="date" id="date" name="date" class="form-control" placeholder="date"/>
            </div>
          </div>
            <!-- Radio buttons -->
            <div class="form-group row">
              <label class="col-sm-6 col-form-label">Campsite Type</label>
              <div class="col btn-group btn-group-toggle" data-toggle="button">Tent</div>
              <div class="col btn-group btn-group-toggle" data-toggle="button">RV</div>
            </div> 

<div class="form-group row">
            <div class="col">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <button type="submit" class="btn bg-primary text-white">Search</button>
            </div>
          </div>
        </form>
  </div>
</div>
</div>
</div>
</div>

0 个答案:

没有答案
相关问题