1
I’m having a problem with the boostrap modal, which is the following:
The modal is opened by clicking on a button, so the modal is closed console shows that it opened once. If I click again on the button to open this same modal, in the console shows that it opened more than 3 times in a row, when he appears only once.
Why does this happen?
I need to destroy the modal as soon as it closes, so I’m using the following:
$('#').modal('hide');
I have tried to use this method below, but it destroys the modal, but the background "gray opacity" of the modal still remains and I do not know why this happens.
$('#').modal('dispose');
Example of the modal I use:
<section id="CreateNewFloorModalSection">
<div class="modal fade pb-5 mb-5" id="CreateNewFloorModal" tabindex="-1" role="dialog" aria-labelledby="CreateNewFloorModal" aria-hidden="true" data-backdrop="static" data-keyboard="false" data-focus="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <!-- start {modal-dialog} -->
<div class="modal-content"> <!-- start {modal-content} -->
<div class="modal-header"> <!-- start {modal-header} -->
<h5 class="modal-title">
<i class="fab fa-accusoft fa-lg ml-2 mr-2"></i>
Create New Floor
</h5>
</div> <!-- end {modal-header} -->
<div class="modal-body mx-auto pt-3 mb-3"> <!-- start {modal-body} -->
<form id="CreateNewFloorForm" action=""> <!-- start {form} -->
<div class="form-group row mt-2 mb-4">
<div class="col-12">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text bg-primary text-white"><i class="fas fa-key"></i></span>
</div>
<input id="FloorID" class="form-control controls" type="text" placeholder="Enter the Floor ID" aria-label="FloorID" aria-describedby="ID do Floor para inserir no DBS">
</div>
</div>
</div>
<div class="form-group row mb-3"> <!-- start {form-group} {map floor} -->
<div class="col-12">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-map"></i></span>
</div>
<input id="NewMapFloor" class="form-control" type="text" disabled required>
</div>
</div>
<div class="col-12">
<small id="NewMapFloorHelp" class="form-text text-muted ml-1">The Map ID is Generated Automatically.</small>
</div>
</div> <!-- end {form-group} {map floor} -->
<div class="form-group row mb-3"> <!-- start {form-group} {date create} -->
<div class="col-12">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar ml-1 mr-1"></i></span>
</div>
<input id="NewFloorDateCreate" class="form-control" type="text" disabled required>
</div>
</div>
<div class="col-12">
<small id="NewFloorDateCreateHelp" class="form-text text-muted ml-1">The Date Create is Generated Automatically </small>
</div>
</div> <!-- end {form-group} {date create} -->
</form> <!-- end {form} -->
<div class="modal-footer"> <!-- start {modal-footer} -->
<button id="RejectSaveNewFloor" class="btn btn-danger" type="button" data-toggle="modal" data-target="#CancelModal" data-dismiss="modal" aria-label="Close">Discard</button>
<button id="SaveNewFloor" class="btn btn-primary" type="button">Save New Floor</button>
</div> <!-- end {modal-footer} -->
</div> <!-- end {modal-content} -->
</div> <!-- end {modal-dialog} -->
</div> <!-- end {modal} -->
</section>
Excuse the question, but what would be this "destroy" that you talk about? Because "Hide" is no longer enough. If your intention is to fully remove the page code, I believe it is mandatory that you update the page without loading this code.
– Luiz
By the way, you want to hide it from the page. Destroying would be considered removing the page item, which can be done with jQuery:
$('#meuModal').remove();. Furthermore, visit this link: https://v4-alpha.getbootstrap.com/components/modal/#modaloptions for more info.– Daniel Bonifácio
@Luiz , the problem I’m having that the second time I open the same modal it appears on the console that opened more than 3 times in a row only that click... I don’t know what I do.
– user50860