My When attempting to click the model on my webpage under the "Reserve Campsite Button" nothing seems to open ive attempted to see if the divs was causing the problem and i dont think that anything is off there. I am student so maybe there is something that i am missing or not understanding any help would be awesome thanks in advance

<div id="reserveModal"  role="dialog">
        <div   role="document">
            <div >
                <div >
                    <h3 >Reserve a Campsite</h3>
                    <button type="button"  data-dismiss="modal">&times;</button>
                </div>
                <div >
                    <div >
             <form>
          <div >
            <label for="numCampers" >Number of Campers</label>
            <div >
          
          <select   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 >
        <label for="date" >Date</label>
        <div >
          <input type="date"  id="date" name="date" placeholder="mm/dd/yyyy"/> 
        </div>
    </div>
    <div >
      <label for="date" >Campsite Type</label>
        <div  data-toggle="buttons">
            <label >
              <input type="radio" name="siteTent" id="option1" autocomplete="off" checked> Tent
              </label>
              <label >
                <input type="radio" name="siteRV" id="option2" autocomplete="off"> RV
              </label>
                </div>
              </div>
              <div >
                <button type="submit" data-dismiss="modal" >Cancel</button>
                <button type="submit" >Search</button>
              </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <nav >
    <div >
      <a  href="#"><img src="img/logo.png" height="30" width="30"/>
      </a>
      <button  type="button" data-toggle="collapse" data-target="#nucampNavbar"> 
      <span ></span>
      </button>
      <div  id="nucampNavbar">
        <ul >
          <li ><a  href="#"><i ></i> Home</a></li>
          <li ><a href="aboutus.html"><i ></i> About </a></li>
          <li ><a  href="#"><i ></i> Sites</a></li>
          <li ><a  href="contactus.html"><i ></i> Contact</a></li>
        </ul>
        <span >
        <a role="button" data-toggle="modal" data-target="#loginmodal">
        <i ></i> Login
        </a>  
        </span>
      </div>
    </div>

CodePudding user response：

Just search bootstrap documentation on modals: Their implementation of a modal is as so:

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

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        ...
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>

However I can't see any option to toggle the modal? Only a log-in modal, which has a different data-target than the modal id.

CodePudding user response：

Button did not have data-toggle='modal' there was also not a data-target linking to the id of#reserveModal. corrected code below:

Reserve Campsite