Bom, eu tenho o seguinte arquivo com uma modal que foi feita por um amigo para mim:
Contudo, quando se clica em Open Small Modal funciona muito bem, mas quando de seguida clico em fechar a modal não fecha novamente, em contra partida se eu clicar fora do fechar, ou seja fora do Modal ela fecha.
Como poderia fazer para que ela fechasse ao clicar no botão fechar e para que não fechasse quando se clicasse fora da modal?
Código:
<!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:
Código Atual:
<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
>
Obrigado.