Error: How to properly close my modal window

Admin 1
Viewed 135

I am creating a modal window but I am having problems closing it, the following is a fixed navbar which I place as a footer and contains two buttons, one of them opens my modal window.

The following is the code of my navbar located in the footer:

<div id="accept_cookie_ga4" class="alert alert-infoCookie alert-dismissible fade in navbar-fixed-bottom hide" role="alert">
    <h4>Titulo</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </p>

    <button type="button" class="btn btn-success" data-dismiss="alert">Aceptar</button>

    <input type="button" class="btn btn-success" data-dismiss="alert"
           data-toggle="modal" data-target="#myModal" value="Abrir Modal" />    
</div>

The following is the code of my modal window that is opened from the button Abrir Modal located in the navbar

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title" id="myModal-label">Titulo de modal</h4>
             </div>
             <div class="modal-body">
                 Modal content...
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
             </div>
         </div>
     </div>
 </div>

Clicking the OK button is supposed to close my modal window but it doesn't. As additional information I leave the versions of JQuery and Bootstrap.

  • JQuery version 3.3.1
  • Bootstrap version 3.3.7

I have tried to use the following function but still my modal window does not close.

<script>
  $(".cerrarModal").click(function () {
    $("#myModal").modal('hide')
  });        
</script>

The console of my browser does not show any error so I do not know what is wrong.

twitter-bootstrap-3 jquery
2 Answers
user_138035490

You don't need custom Javascript code to close a Bootstrap's modal, as long as you mark your close buttons with the data-dismiss="modal" attribute (as you are already doing).

You just need to remove the data-dismiss="alert" in your toggle button:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accept_cookie_ga4" class="alert alert-infoCookie alert-dismissible fade in navbar-fixed-bottom" role="alert">
    <h4>Titulo</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </p>

    <button type="button" class="btn btn-success" data-dismiss="alert">Aceptar</button>

    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
    Abrir Modal
  </button>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModal-label">Titulo de modal</h4>
            </div>
            <div class="modal-body">
                Modal content...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

See also on JSFiddle.

See here for documentation about Bootstrap's modal in v3.3.7.

user_98645390
Related