单击时不会打开模态框

Question

我的当尝试在“预订营地按钮”下单击我的网页上的模型时，似乎没有打开任何东西，我试图查看 div 是否导致问题，我认为那里没有任何问题。我是学生，所以也许我缺少一些东西或不理解任何帮助会很棒提前谢谢

<div id="reserveModal" class="modal fade" role="dialog">
        <div class="modal-dialog" class="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  class="form-control" name="numCampers" id="numCampers">
            <option>Select...</option>
            <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>
            <option value="7">7</option>
          </select>
        </div>
        </div>
        </div>
        </div>
      </div> 
    </div>
    <div class="form-group row">
        <label for="date" class="col col-sm-6 col-form-label">Date</label>
        <div class="col">
          <input type="date" class="form-control" id="date" name="date" placeholder="mm/dd/yyyy"/> 
        </div>
    </div>
    <div class="form-group row">
      <label for="date" class="col-sm-6 col-form-label">Campsite Type</label>
        <div class="col-2 btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-success active">
              <input type="radio" name="siteTent" id="option1" autocomplete="off" checked> Tent
              </label>
              <label class="btn btn-primary">
                <input type="radio" name="siteRV" id="option2" autocomplete="off"> RV
              </label>
                </div>
              </div>
              <div class="form-group row">
                <button type="submit" data-dismiss="modal" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Search</button>
              </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <nav class="navbar navbar-expand-sm navbar-dark sticky-top">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="30"/>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nucampNavbar"> 
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nucampNavbar">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-home fa-lg"></i> Home</a></li>
          <li class="nav-item"><a class="nav-link"href="aboutus.html"><i class="fa fa-info"></i> About </a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-list fa-lg"></i> Sites</a></li>
          <li class="nav-item"><a class="nav-link" href="contactus.html"><i class="fa fa-address-card fa-lg"></i> Contact</a></li>
        </ul>
        <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>

Answer 1

只需在模态上搜索 bootstrap documentation： 他们的模态实现是这样的：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

但是我看不到任何切换模式的选项？只有一个登录模式，其数据目标与模式 id 不同。

Answer 2

按钮没有 data-toggle='modal' 也没有链接到 ID of#reserveModal 的数据目标。更正代码如下：

<a href="#reserveForm" role="button" class="btn btn-info btn-lg text-nowrap" data-toggle="modal" data-target="#reserveModal" >Reserve Campsite</a>