Well, I have the following file with a modal that was made by a friend for me:
However, when I click on Open Small Modal it works fine, but when I next click on close the modal does not close again, against if I click outside the close, that is outside the Modal it closes. >
How could you have it close by clicking the close button and not closing when you clicked out of 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><scripttype="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><linkrel="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.