Hide modal when clicking "Close" bootstrap

0

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.

    
asked by anonymous 22.07.2016 / 20:53

2 answers

4

You need to do this:

  $('#myModal').modal({backdrop: 'static', show: true});  
<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>
<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>

You forgot to data-dismiss="modal" aria-label="Close" .

    
22.07.2016 / 21:18
0

You have correctly used data-dismiss="modal" but forgot to close the style quotes and caused syntax error.

To block the closure of the modal by clicking outside use data-backdrop="static" .

Example:

<div class="container">

  <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" data-backdrop="static">
    <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> 
    
22.07.2016 / 21:32