I've encountered an issue with a simple model I created - when I click on it, the popup appears but the heading and paragraph are not visible. Instead, I see an empty model, which is quite strange. I've gone through the Bootstrap documentation but I'm still unsure of what I'm doing wrong. Any insights or suggestions would be greatly appreciated. Thanks!
<div class="container text-center">
<h1 class="display-3 text-center">Explore</h1>
<p class="text-center">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste architecto itaque quis dolorem accusamus provident?</p>
<button class="btn btn-outline-light" data-toggle="modal" data-target="#myModal">Read More</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Connect with Us!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur error vitae ullam quisquam magni! Id voluptate quod quaerat molestias quas?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function(){
$('#myModal').modal('show')
});
</script>