I am currently integrating a modal into my existing HTML page.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li><a href="#myPage">HOME1</a></li>
<li><a href="#band">BAND1</a></li>
<li><a href="#tour">TOUR1</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images\logos\flexit-logo-TM-comp.png" style="padding-top:15px" >
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li ><a href="HowItWorks.html" style="color: white !important">HOME</a></li>
<li><a href="#band" style="color: white !important">BAND</a></li>
<li><a href="#tour" style="color: white !important">TOUR</a></li>
<li><a href="#contact" style="color: white !important">CONTACT</a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li><a href="HowItWorks.html">HOME1</a></li>
<li><a href="#band">BAND1</a></li>
<li><a href="#tour">TOUR1</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
In the W3schools demo, the above modal functions correctly, however in my code, the "Close Modal" feature is not functioning as expected. I'm unsure of what may be causing this issue. Any assistance would be greatly appreciated.