In your code you do not show what bootstrap you are using or what additional styles you have loaded.
Assuming it was jQuery 3.3.1 and Bootstrap 3.3.7, your example would look like this:
link
Which as you'll see has no problem closing the modal.
Analyzing the "life cycle" of the modal, we must appreciate the following:
- the modal exists from the beginning. Has position
fixed , display none (that is, not shown) and z-index 1050.
- when opening the modal the display becomes
block (that is, it is displayed)
- opening the modal generates temporarily an element with class
modal-backdrop that also has position fixed but z-index 1040, which is below the modal.
- when closing the modal the backdrop element is removed from the document, whereby the main content is no longer under the dark layer.
In the screenshot that you show us, there is something that makes the modal fall below the backdrop. For example, one of the styles that you are adding to customize your theme is altering the z-index of the class .modal .
However, I am inclined to believe that the origin of the problem is actually that your modal is nested within another element that has its own z-index.
For example
<div class="container">
<div class="col-md-12" style="position:relative;z-index:1000">
<!-- Código del modal -->
</div>
</div>
link
If you notice, in a case like that, the modal is the son of an element whose z-index is 1000, and although the modal itself has a higher z-index, its parent node is already below the backdrop. .
Summary:
- Possibility 1: there is a style that alters the original order of the z-index
- Possibility 2: you put the modal within an element that already has its own z-index and is smaller than the z-index of the backdrop.
As a general practice, get used to putting manners out of any container, having as a parent node the body of the document.
Edit
Since you're using modal-dialog-centered I think it's bootstrap4. Actually the behavior is the same:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="position:relative;z-index:1000">
<div class="co-single-service-3">
<span class="icon"><i class="icon-megaphone"></i></span>
<div class="content fix">
<p>Yo abro un modal que está fuera de este nodo y no altero su comportamiento</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch demo modal
</button>
</div>
</div>
</div>
<div class="col-sm-6" style="position:relative;z-index:1000">
<div class="co-single-service-3">
<span class="icon"><i class="icon-megaphone"></i></span>
<div class="content fix">
<p><b>Contengo el modal</b> y mi z-index 1000 <b>influye en su posicionamiento</b>.</p>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</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, in porro albucius qui, in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus. Lorem ipsum dolor sit amet, <strong>in porro albucius qui</strong>,
in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</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, in porro albucius qui, in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus. Lorem ipsum dolor sit amet, <strong>in porro albucius qui</strong>,
in nec quod novum accumsan, mei ludus tamquam dolores id. No sit debitis meliore postulant, per ex prompta alterum sanctus, pro ne quod dicunt sensibus.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
