Bootstrap 添加新脚本标签后不再显示模态
Bootstrap modal no longer showing since adding new script tags
我正在使用 bootstrap 模式，但我注意到自从我更改并添加了更多 bootstrap 下载的文件后，它已停止工作。可能不是脚本标签导致的，但我注意到在那之前它一直在工作。
我还添加了 bootstrap courousal 但我现在删除了它，它仍然没有显示（模态）
控制台中未显示任何错误。
我在下面包含了我的代码；
HMTL：
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="countryName"></h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="countryFlag" class="countryFlagModal"/>
<select id="selectCountryInfo">
<option value="getKeyInfoSection">Key Country Info</option>
<option value="getWeatherSection">Weather Forecast</option>
<option value="getCurrencySection">Currency / Exchange Rate</option>
<option value="getWikipediaSection">Wikipedia Links</option>
<option value="getCovidSection">Latest Covid Stats</option>
<option value="recentCountryNews">Recent News</option>
</select>
<!--KEY COUNTRY SECTION WITHIN MODAL-->
<div id="getKeyInfoSection" class="countryInfoSection">
<h5 class="detailHeading">Population</h5>
<p id="population"></p>
<h5 class="detailHeading">Capital City</h5>
<p id="capital"></p>
<h5 class="detailHeading">Latitude / Longitude</h5>
<p id="latlong"></p>
<h5 class="detailHeading">Timezone(s)</h5>
<ul id="timezoneList">
</ul>
</div>
<!--WEATHER SECTION WITHIN MODAL-->
<div id="getWeatherSection" class="countryInfoSection">
<select id="weatherSelect">
</select>
<p id="currentWeatherPara"></p>
<table>
<tr class="mainTableHeading">
<th>Main</th>
<th>Description</th>
<th>Temp</th>
<th>Feels Like</th>
<th>Temp Min</th>
<th>Temp Max</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Visibility</th>
<th>Wind Speed</th>
<th>Wind Deg</th>
<th>Sunrise</th>
<th>Sunset</th>
</tr>
<tr>
<td><img src="images/weather_main.png" alt="Main"/></td>
<td><img src="images/weather_description.png" alt="Weather Description"/></td>
<td><img src="images/weather_temp.png" alt="Temp"/></td>
<td><img src="images/weather_feelsLike.png" alt="Feels Like"/></td>
<td><img src="images/weather_min.png" alt="Temp Min"/></td>
<td><img src="images/weather_max.png" alt="Temp Max"/></td>
<td><img src="images/weather_pressure.png" alt="Weather Pressure"/></td>
<td><img src="images/weather_humidity.png" alt="Weather Humidity"/></td>
<td><img src="images/weather_visibility.png" alt="Weather Visibility"/></td>
<td><img src="images/weather_windSpeed.png" alt="Wind Speed"/></td>
<td><img src="images/weather_windDegree.png" alt="Wind Degree"/></td>
<td><img src="images/weather_sunRise.png" alt="Sunrise"/></td>
<td><img src="images/weather_sunset.png" alt="Sunset"/></td>
</tr>
<tr>
<td id="weatherMain"></td>
<td id="weatherDescription"></td>
<td id="weatherTemp"></td>
<td id="weatherFeelsLike"></td>
<td id="weatherMin"></td>
<td id="weatherMax"></td>
<td id="weatherPressure"></td>
<td id="weatherHumidity"></td>
<td id="weatherVisibility"></td>
<td id="weatherWindSpeed"></td>
<td id="weatherWindDeg"></td>
<td id="weatherSunrise"></td>
<td id="weatherSunset"></td>
</tr>
</table>
</div>
<!--COUNTRY SECTION WITHIN MODAL -->
<div class="countryInfoSection" id="getCurrencySection">
<ul id="currencyOptions">
<li class="currencyLi activeExchange" id="showLatestExchange">Latest Exchange Rate</li>
<li class="currencyLi inactiveExchange" id="showHistoricalExchange">Historical Exchange Rate</li>
</ul>
<div id="latestExchangeContent">
<p id="currentExchangeBase"></p>
<p id="currentExchangeDate"></p>
<ul id="latestExchangeRates">
</ul>
</div>
<div id="historicalExchangeContent">
<p>Set a valid date (DD/MM/YYYY) commencing from 1999, then click submit to view the exchange rate on that particular day.</p>
<label class="exchangeRateLabel" for="exchangeRateDate">Date:</label>
<input id="exchangeRateDate" placeholder="01" type=number min="01" max="31"/>
<label class="exchangeRateLabel" for="exchangeRateMonth">Month:</label>
<input id="exchangeRateMonth" placeholder="06" type=number min="01" max="12">
<label class="exchangeRateLabel" for="exchangeRateYear">Year:</label>
<input for="exchangeRateYear" id="exchangeRateYear" placeholder="2021" type=number min="1999" max="2021"/>
<button id="showHistoricalRate">SHOW HISTORICAL RATE</button>
<p id="historicalBase"></p>
<p id="historicalDate"></p>
<ul id="historicalRateResults">
</ul>
</div>
</div>
<div class="countryInfoSection" id="getCovidSection">
<h5 class="detailHeading">Updated Date:<br/><span id="dateOfRecord"></span></h5>
<ul id="covidStatsList">
<li>Total Confirmed Cases: <span id="totalConfirmedCases"></span></li>
<li>Newly Confirmed Cases: <span id="newlyConfirmedCases"></span></li>
<li>Total Recovered Cases: <span id="totalRecoveredCases"></span></li>
<li>Newly Recovered Cases: <span id="newlyRecoveredCases"></span></li>
<li>Total Deaths: <span id="totalDeaths"></span></li>
<li>New Deaths: <span id="newDeaths"></span></li>
</ul>
</div>
<div class="countryInfoSection" id="getWikipediaSection">
</div>
<div class="countryInfoSection" id="recentCountryNews">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
脚本标签：
<script type="application/javascript" src="libs/js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="libs/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
按如下方式重新排列您的 <script> 标签。
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="libs/js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
jQuery 通常应该排在第一位，或者至少包含在 Bootstrap 之前，然后是通常依赖于它们的其他插件，最后是您自己的脚本。
如果模态框仍然不起作用，请分享您的 Bootstrap 版本详细信息。
我正在使用 bootstrap 模式，但我注意到自从我更改并添加了更多 bootstrap 下载的文件后，它已停止工作。可能不是脚本标签导致的，但我注意到在那之前它一直在工作。
我还添加了 bootstrap courousal 但我现在删除了它，它仍然没有显示（模态）
控制台中未显示任何错误。
我在下面包含了我的代码；
HMTL：
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="countryName"></h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="countryFlag" class="countryFlagModal"/>
<select id="selectCountryInfo">
<option value="getKeyInfoSection">Key Country Info</option>
<option value="getWeatherSection">Weather Forecast</option>
<option value="getCurrencySection">Currency / Exchange Rate</option>
<option value="getWikipediaSection">Wikipedia Links</option>
<option value="getCovidSection">Latest Covid Stats</option>
<option value="recentCountryNews">Recent News</option>
</select>
<!--KEY COUNTRY SECTION WITHIN MODAL-->
<div id="getKeyInfoSection" class="countryInfoSection">
<h5 class="detailHeading">Population</h5>
<p id="population"></p>
<h5 class="detailHeading">Capital City</h5>
<p id="capital"></p>
<h5 class="detailHeading">Latitude / Longitude</h5>
<p id="latlong"></p>
<h5 class="detailHeading">Timezone(s)</h5>
<ul id="timezoneList">
</ul>
</div>
<!--WEATHER SECTION WITHIN MODAL-->
<div id="getWeatherSection" class="countryInfoSection">
<select id="weatherSelect">
</select>
<p id="currentWeatherPara"></p>
<table>
<tr class="mainTableHeading">
<th>Main</th>
<th>Description</th>
<th>Temp</th>
<th>Feels Like</th>
<th>Temp Min</th>
<th>Temp Max</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Visibility</th>
<th>Wind Speed</th>
<th>Wind Deg</th>
<th>Sunrise</th>
<th>Sunset</th>
</tr>
<tr>
<td><img src="images/weather_main.png" alt="Main"/></td>
<td><img src="images/weather_description.png" alt="Weather Description"/></td>
<td><img src="images/weather_temp.png" alt="Temp"/></td>
<td><img src="images/weather_feelsLike.png" alt="Feels Like"/></td>
<td><img src="images/weather_min.png" alt="Temp Min"/></td>
<td><img src="images/weather_max.png" alt="Temp Max"/></td>
<td><img src="images/weather_pressure.png" alt="Weather Pressure"/></td>
<td><img src="images/weather_humidity.png" alt="Weather Humidity"/></td>
<td><img src="images/weather_visibility.png" alt="Weather Visibility"/></td>
<td><img src="images/weather_windSpeed.png" alt="Wind Speed"/></td>
<td><img src="images/weather_windDegree.png" alt="Wind Degree"/></td>
<td><img src="images/weather_sunRise.png" alt="Sunrise"/></td>
<td><img src="images/weather_sunset.png" alt="Sunset"/></td>
</tr>
<tr>
<td id="weatherMain"></td>
<td id="weatherDescription"></td>
<td id="weatherTemp"></td>
<td id="weatherFeelsLike"></td>
<td id="weatherMin"></td>
<td id="weatherMax"></td>
<td id="weatherPressure"></td>
<td id="weatherHumidity"></td>
<td id="weatherVisibility"></td>
<td id="weatherWindSpeed"></td>
<td id="weatherWindDeg"></td>
<td id="weatherSunrise"></td>
<td id="weatherSunset"></td>
</tr>
</table>
</div>
<!--COUNTRY SECTION WITHIN MODAL -->
<div class="countryInfoSection" id="getCurrencySection">
<ul id="currencyOptions">
<li class="currencyLi activeExchange" id="showLatestExchange">Latest Exchange Rate</li>
<li class="currencyLi inactiveExchange" id="showHistoricalExchange">Historical Exchange Rate</li>
</ul>
<div id="latestExchangeContent">
<p id="currentExchangeBase"></p>
<p id="currentExchangeDate"></p>
<ul id="latestExchangeRates">
</ul>
</div>
<div id="historicalExchangeContent">
<p>Set a valid date (DD/MM/YYYY) commencing from 1999, then click submit to view the exchange rate on that particular day.</p>
<label class="exchangeRateLabel" for="exchangeRateDate">Date:</label>
<input id="exchangeRateDate" placeholder="01" type=number min="01" max="31"/>
<label class="exchangeRateLabel" for="exchangeRateMonth">Month:</label>
<input id="exchangeRateMonth" placeholder="06" type=number min="01" max="12">
<label class="exchangeRateLabel" for="exchangeRateYear">Year:</label>
<input for="exchangeRateYear" id="exchangeRateYear" placeholder="2021" type=number min="1999" max="2021"/>
<button id="showHistoricalRate">SHOW HISTORICAL RATE</button>
<p id="historicalBase"></p>
<p id="historicalDate"></p>
<ul id="historicalRateResults">
</ul>
</div>
</div>
<div class="countryInfoSection" id="getCovidSection">
<h5 class="detailHeading">Updated Date:<br/><span id="dateOfRecord"></span></h5>
<ul id="covidStatsList">
<li>Total Confirmed Cases: <span id="totalConfirmedCases"></span></li>
<li>Newly Confirmed Cases: <span id="newlyConfirmedCases"></span></li>
<li>Total Recovered Cases: <span id="totalRecoveredCases"></span></li>
<li>Newly Recovered Cases: <span id="newlyRecoveredCases"></span></li>
<li>Total Deaths: <span id="totalDeaths"></span></li>
<li>New Deaths: <span id="newDeaths"></span></li>
</ul>
</div>
<div class="countryInfoSection" id="getWikipediaSection">
</div>
<div class="countryInfoSection" id="recentCountryNews">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
脚本标签：
<script type="application/javascript" src="libs/js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="libs/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
按如下方式重新排列您的 <script> 标签。
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="libs/js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
jQuery 通常应该排在第一位，或者至少包含在 Bootstrap 之前，然后是通常依赖于它们的其他插件，最后是您自己的脚本。
如果模态框仍然不起作用，请分享您的 Bootstrap 版本详细信息。