Bootstrap modal popup won't close
Question
When you click "inloggen", the modal pops up, which is great. But when you go to the register and back to login and back to register, etc, then a click outside of the modal won't close it anymore.
Does anybody know the problem?
I think it's an issue with the JavaScript code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="all"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.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> <script src="assets/js/login-register.js" type="text/javascript"></script> <link rel="stylesheet" href="../css/opmaak.css"> <script src="../js/main.js" type="text/javascript"></script> <title>'T Shopkartje</title> <style> .modal-header, h4, .close { background-color: #5cb85c; color:white !important; text-align: center; font-size: 30px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } </style> <style>html, body { height: 100%; margin: 0; width: auto!important; overflow-x: hidden!important; background-image:url('../images/achtergrond.png'); scroll-behavior: smooth; } .carousel, .item, .active { height: 95%; } .container-fluid{ background-image:url('../images/achtergrond.png'); } .carousel-inner { height: 100%; background: #000; } .carousel-caption{padding-bottom:80px;} h2{font-size: 60px;} p{padding:10px} /* Background images are set within the HTML using inline CSS, not here */ .fill { width: 100%; height: 110%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity:0.6; } .header { background-color: #f1f1f1; padding: 30px; text-align: center; } /** * Button */ .btn-transparent { background: transparent; color: #fff; border: 2px solid #fff; } .btn-transparent:hover { background-color: #fff; } .btn-rounded { border-radius: 70px; } .btn-large { padding: 11px 45px; font-size: 18px; } /** * Change animation duration */ .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .footer { position: bottom; bottom: 0px; width: 100%; height: 55px; text-align: center !important; background-color: #f2f2f2; } </style> </head> <body> <nav class="navbar-fixed navbar-white"> <div class="container-fluid"> <div class="navbar-header"> </div> <div> <ul class="nav navbar-nav navbar-right"> <li><a type="button" href="javascript: void(0)" id="btnlogin">Inloggen</a></li> <li><a type="button" href="javascript: void(0)" id="btnlogon">Registreren</a></li> </ul> </div> </div> </nav> <!-- Modal --> <div class="modal fade" id="loginmodel" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="padding:35px 50px;"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-lock"></span> Inloggen</h4> </div> <div class="modal-body" style="padding:40px 50px;"> <form role="form"> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-envelope"></span> E-Mail</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div> <div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label> <input type="text" class="form-control" id="psw" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox" value="" checked>Remember me</label> </div> <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Inloggen</button> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <p class="pp">Geen account? <button class="btn btn-light" id="btnlogonfromin">Registreren</button></p> <p class="pp"><button type="button" class="btn btn-light" id="btnlogin">Passwoord Vergeten?</button></p> </div> </div> </div> </div> </div> <!-- Modal2 --> <div class="modal fade" id="logonmodel" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="padding:35px 50px;"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-lock"></span> Registreren</h4> </div> <div class="modal-body" style="padding:40px 50px;"> <form role="form"> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Voornaam</label> <input type="text" class="form-control" id="voornm" placeholder="Enter Voornaam" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Achternaam</label> <input type="text" class="form-control" id="achtrn" placeholder="Enter Achternaam" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-envelope"></span> E-Mail</label> <input type="text" class="form-control" id="email" placeholder="Enter email" required> </div> <div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Passwoord</label> <input type="text" class="form-control" id="psw" placeholder="Enter Passwoord" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-bed"></span> Straat + Huisnummer</label> <input type="text" class="form-control" id="straat" placeholder="Straat + Huisnummer" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-road"></span> Postcode + Stad</label> <input type="text" class="form-control" id="stad" placeholder="Postcode + Stad" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-phone"></span> Telefoonnummer</label> <input type="text" class="form-control" id="numb" placeholder="Enter Telefoonnummer" required> </div> <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Registreren</button> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <p class="pp">Heeft u al een account? <button type="button" class="btn btn-light" id="btnloginfromin">Inloggen</button></p> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#btnlogin").click(function(){ $("#loginmodel").modal(); }); }); $(document).ready(function(){ $("#btnlogon").click(function(){ $("#logonmodel").modal(); }); }); $("#btnloginfromin").on("click", function(){ $("#logonmodel").modal("hide"); $("#logonmodel").on("hidden.bs.modal",function(){ $("#loginmodel").modal("show"); }); }); $("#btnlogonfromin").on("click", function(){ $("#loginmodel").modal("hide"); $("#loginmodel").on("hidden.bs.modal",function(){ $("#logonmodel").modal("show"); }); }); </script> <script> function ons() { location.href = "ons.html"; } </script> <script> function shopkart() { location.href = "shopkart.php"; } </script> <script> function contacteren() { location.href = "contacteren.html"; } </script> <?php ?> </body> </html>
1 answers
solution1
1 ACCPTED 2019-03-16 17:05:21
You bound a callback function on hidden.bs.modal that opens a modal.
...
$("#loginmodel").modal("hide");
$("#loginmodel").on("hidden.bs.modal",function(){
$("#logonmodel").modal("show");
});
...
It is not necessary and that makes a infinite modal opening. You just need to call modal('show') after modal('hide') .
...
$("#btnloginfromin").on("click", function() {
$("#logonmodel").modal("hide");
$("#loginmodel").modal("show");
});
$("#btnlogonfromin").on("click", function() {
$("#loginmodel").modal("hide");
$("#logonmodel").modal("show");
});
...
Snippet:
$(document).ready(function() { $("#btnlogin").click(function() { $("#loginmodel").modal(); }); }); $(document).ready(function() { $("#btnlogon").click(function() { $("#logonmodel").modal(); }); }); $("#btnloginfromin").on("click", function() { $("#logonmodel").modal("hide"); $("#loginmodel").modal("show"); }); $("#btnlogonfromin").on("click", function() { $("#loginmodel").modal("hide"); $("#logonmodel").modal("show"); }); function ons() { location.href = "ons.html"; } function shopkart() { location.href = "shopkart.php"; } function contacteren() { location.href = "contacteren.html"; }
.modal-header, h4, .close { background-color: #5cb85c; color: white !important; text-align: center; font-size: 30px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } html, body { height: 100%; margin: 0; width: auto!important; overflow-x: hidden!important; background-image: url('../images/achtergrond.png'); scroll-behavior: smooth; } .carousel, .item, .active { height: 95%; } .container-fluid { background-image: url('../images/achtergrond.png'); } .carousel-inner { height: 100%; background: #000; } .carousel-caption { padding-bottom: 80px; } h2 { font-size: 60px; } p { padding: 10px } /* Background images are set within the HTML using inline CSS, not here */ .fill { width: 100%; height: 110%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity: 0.6; } .header { background-color: #f1f1f1; padding: 30px; text-align: center; } /** * Button */ .btn-transparent { background: transparent; color: #fff; border: 2px solid #fff; } .btn-transparent:hover { background-color: #fff; } .btn-rounded { border-radius: 70px; } .btn-large { padding: 11px 45px; font-size: 18px; } /** * Change animation duration */ .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .footer { position: bottom; bottom: 0px; width: 100%; height: 55px; text-align: center !important; background-color: #f2f2f2; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="all"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.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> <script src="assets/js/login-register.js" type="text/javascript"></script> <link rel="stylesheet" href="../css/opmaak.css"> <script src="../js/main.js" type="text/javascript"></script> <title>'T Shopkartje</title> </head> <body> <nav class="navbar-fixed navbar-white"> <div class="container-fluid"> <div class="navbar-header"> </div> <div> <ul class="nav navbar-nav navbar-right"> <li><a type="button" href="javascript: void(0)" id="btnlogin">Inloggen</a></li> <li><a type="button" href="javascript: void(0)" id="btnlogon">Registreren</a></li> </ul> </div> </div> </nav> <!-- Modal --> <div class="modal fade" id="loginmodel" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="padding:35px 50px;"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-lock"></span> Inloggen</h4> </div> <div class="modal-body" style="padding:40px 50px;"> <form role="form"> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-envelope"></span> E-Mail</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div> <div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label> <input type="text" class="form-control" id="psw" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox" value="" checked>Remember me</label> </div> <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Inloggen</button> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <p class="pp">Geen account? <button class="btn btn-light" id="btnlogonfromin">Registreren</button></p> <p class="pp"><button type="button" class="btn btn-light" id="btnlogin">Passwoord Vergeten?</button></p> </div> </div> </div> </div> <!-- Modal2 --> <div class="modal fade" id="logonmodel" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="padding:35px 50px;"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-lock"></span> Registreren</h4> </div> <div class="modal-body" style="padding:40px 50px;"> <form role="form"> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Voornaam</label> <input type="text" class="form-control" id="voornm" placeholder="Enter Voornaam" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Achternaam</label> <input type="text" class="form-control" id="achtrn" placeholder="Enter Achternaam" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-envelope"></span> E-Mail</label> <input type="text" class="form-control" id="email" placeholder="Enter email" required> </div> <div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Passwoord</label> <input type="text" class="form-control" id="psw" placeholder="Enter Passwoord" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-bed"></span> Straat + Huisnummer</label> <input type="text" class="form-control" id="straat" placeholder="Straat + Huisnummer" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-road"></span> Postcode + Stad</label> <input type="text" class="form-control" id="stad" placeholder="Postcode + Stad" required> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-phone"></span> Telefoonnummer</label> <input type="text" class="form-control" id="numb" placeholder="Enter Telefoonnummer" required> </div> <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Registreren</button> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <p class="pp">Heeft u al een account? <button type="button" class="btn btn-light" id="btnloginfromin">Inloggen</button></p> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap modal popup background screen won't close
Bootstrap 4 modal won't close
Modal won't close - Twitter Bootstrap 1.40
Bootstrap modal won't close on click
Bootstrap modal won't close in Laravel project
Bootstrap Modal won't close on Chrome and Safari
My bootstrap modal won't close upon clicking the 'x' or Close
Popup won't close
Although scripts and css included, Bootstrap modal popup won't work
Bootstrap Modal won't close, previously appended to Body using JQuery
Related Tags