0
Well, I have the following file with a modal that was made by a friend to me:
However, when you click on Open Small Modal works very well, but when I then click on close the modal does not close again, on counter start if I click outside the close, ie outside the Modal it closes.
How could you make it close when you click the close button and so it doesn’t close when you click outside the modal?
Code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="http://i.imgur.com/Pr1JDoh.png"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="theme-color" content="#3863FF">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#subir').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
<script type="text/javascript" src="js/main.js"></script>
<style>
.modal.modal-wide .modal-dialog {
width: 20%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
/* irrelevant styling */
body { text-align: center; }
body p {
max-width: 100px;
margin: 20px auto;
}
#tallModal .modal-body p { margin-bottom: 200px }
</style>
</head>
<body>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body"><br>
<button type="button" class="btn btn-primary" style="padding: 20px 20px 20px 20px; margin-top:40px; margin-bottom:40px; data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@EDIT:
Current Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script> $('#myModal').modal({backdrop: 'static', show: false}); </script>
</head>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body"><br>
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close" style="padding: 20px 20px 20px 20px; margin-top:40px; margin-bottom:40px;" >Fechar</button>
</div>
</div>
</div>
</div>
</div
>
Thank you.
It is already working, however as lock the outside, so that when they click outside the modal n close?
– Gonçalo
I added the little script that prevents closing with the click off.
– Ricardo Mota
The script is not working.
– Gonçalo
You can run the code right here to test @Gonçalo. Click on the "Run code snippet" button and see that it’s working.
– Ricardo Mota
I will update the question with my code, because mine when you click the outside keeps closing. To see if you can help me find the error.
– Gonçalo
But I used your haha code. post for me to see.
– Ricardo Mota
I posted, I can not find the error, because in fact yours is working here in stackoverflow.
– Gonçalo
Your guy script has to stay after the modal html. Put in Footer the: <script> $('#myModal'). modal({backdrop: 'Static', show: false}); </script>
– Ricardo Mota
I did it! Thank you very much Ricardo! , just an extra question, how could you do so that you do not need to click on the "Open Modal" to open the modal, that is to say, as soon as you enter the site opens the modal...
– Gonçalo
Instead of false add show: true. I’ve already changed my code here.
– Ricardo Mota
Perfect! Thank you.
– Gonçalo