當我試圖在我的網頁上的“Reserve Campsite Button”下單擊模型時，似乎沒有任何東西打開我試圖查看 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">×</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>uj5u.com熱心網友回復：
只需搜索有關模態的引導程式檔案：他們對模態的實作如下：
<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">×</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 不同的資料目標。
uj5u.com熱心網友回復：
Button 沒有 data-toggle='modal' 也沒有鏈接到#reserveModal id 的資料目標。更正以下代碼：
<a href="#reserveForm" role="button" class="btn btn-info btn-lg text-nowrap" data-toggle="modal" data-target="#reserveModal" >Reserve Campsite</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/391658.html