I am using bootstrap modal but I noticed that since I changed and added further bootstrap downloaded files, it has stopped working. It may not be the script tags causing it, but I noticed that up until then, it was working.
I also added the bootstrap courousal but I have removed it now, and it still isnt showing (the modal)
No errors are showing in the console.
I have included my code below;
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 TAGS:
<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>
Reorder your <script> tags as follows.
<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 should usually come first, or at least included before Bootstrap, followed by other plugins that usually depend on them with your own scripts coming in at last.
If the modals still don't work, please share your Bootstrap version details.