After importing leaflet-bootstrapmodal.js into my project, I am facing an issue with styling it. Take a look at the plugins listed below:
<!-- Bootstrap modal-->
<link rel="stylesheet" href="bootstrap-modal/bootstrap-modal/leaflet-bootstrapmodal.css">
<!--My plugin -->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<nav class="navbar">
<img src="globeBig.png" class="logo"/>
<h1 class="title">The Gazetteer</h1>
<ul class="list">
<!-- Button trigger modal
<li>
<button type="button" id="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal" disabled>
Show weather forecast for:
</button>
</li> -->
<li class="selector">
<select class="country">
<option class="optionResult">Select a country</option>
</select>
</li>
</ul>
</nav>
<div class="container">
<!-- Modal weather -->
<div class="modal fade" id="Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLabel"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal info -->
<div class="modal fade" id="Info" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="infoModalLabel"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-info">
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Additional html.....
In style.css:
/* issue with styling below:*/
.modal-content{
background-color: red;
}
I am struggling to understand why adding classes to my HTML is not allowing me to customize the modal. It seems there is a conflict with the class names used, and I suspect the order of importing the styles plugin should be after the modal package.