I've been working on a website and added a modal for signup. However, when the user clicks on the signup button, the modal appears but the content inside it is not clickable. Can someone please help me with this issue? Here is the code snippet I am using:
<li><a href="#show" id="showup">signup</a></li>
<div class="modal hide fade" id="show">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h1>Title</h1>
</div>
<div class="modal-body">
<p>The modal Body</p>
</div>
<div class="modal-footer">
<a href="" class="btn">Close</a>
</div>
</div>
Below is the JavaScript code I have used:
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$("#showup").click(function(){
$("#show").modal();
});
</script>
If anyone has any suggestions or screenshots of how to fix this problem, it would be greatly appreciated. Thank you.