My Bootstrap 4 modal is causing issues as it pops up on button click but won't close unless I refresh the page. I've been attempting to get it to close by clicking the 'close' button or simply by clicking anywhere on the main page body.
Despite trying all combinations of class, data-toggle, target, and other attributes from the Bootstrap documentation (link: https://getbootstrap.com/docs/4.0/components/modal/), the issue persists.
Below is the code used to open the modal:
<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a id="create-event" data-toggle="modal" data-target="#createModal" class="nav-link" href="#">Create Event</a>
</li>
</ul>
And here is the code for the modal itself:
<div class="modal-container register modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="row" role="document">
<div class="col-md-3 register-left">
<i class="far fa-calendar-alt fa-10x"></i>
<h3>Create a new event</h3>
<button type="button" class="btn btn-default" aria-label="Close" data-toggle="modal" data-target="#createModal" class="close" data-dismiss="modal">Close</button>
</div>
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">Parr Family</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Add event" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Description" value="" />
</div>
<div class="maxl">
<label class="radio inline">
<input type="radio" name="person-select" value="helen" checked>
<span class="person-select-span"> Helen </span>
</label>
<label class="radio inline">
<input type="radio" name="person-select" value="bob">
<span class="person-select-span"> Bob </span>
</label>
<label class="radio inline">
<input type="radio" name="person-select" value="violet">
<span class="person-select-span"> Violet </span>
</label>
<label class="radio inline">
<input type="radio" name="person-select" value="dash">
<span class="person-select-span"> Dash </span>
</label>
<label class="radio inline">
<input type="radio" name="person-select" value="jackjack">
<span class="person-select-span"> Jack-Jack </span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" value="" />
</div>
<div class="form-group">
<input type="time" class="form-control" placeholder="Time" value="" />
</div>
<input type="submit" class="btnRegister" value="Create"/>
</div>
</div>
</div>
</div>
</div>
</div>
My objective is to have the modal close reliably using either method mentioned. I am open to suggestions and solutions.
Update: By adding 'modal-dialog' as a class to the second div, the modal can be closed, but it introduces unwanted styling. Further adjustments might be needed.
Another update: Shifting 'modal-dialog' to the subsequent div resolved all issues effectively.