Bootstrap modal does not open

Asked

Viewed 7,683 times

1

I have a button that when clicked opens a modal of bootstrap. However, when clicking this button, the modal is not opening. It follows the structure of the code:

<html>
    <head>        
        <script src="assets/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    </head>

    <body>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyModal">Open Modal</button>

        <div id="MyModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                  <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
      </div>

    </body>

</html>

The bootstrap version I imported into my project is the latest. What

bootstrap-3 modal
  • 1

    What is shown on the console (F12)? You need to enter Jquery and Bootstrap javascript at the bottom of the page!

  • Nothing appears. And there is no error in the page load as well

  • Is with the <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> at the bottom of the page, just like Jquery? If you are using only .css as it is there, it will not work.

  • I added the <script src="Assets/jquery/jquery-3.1.1.min. js" type="text/javascript"></script> that was missing and also not. I didn’t add them at the bottom of the page. I added them to the <head>

  • @Raphaelpradodeoliveira has order to add, first jquery, then bootstrap.js. Suffice follow the documentation http://getbootstrap.com/getting-started/#template

1 answer

7


You didn’t make the imports correctly.

<html>
    <head>   
      <!-- Importando o css do bootstrap -->
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      
    </head>

    <body>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyModal">Diga olá para o mundo!</button>

        <div id="MyModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal de Olá!</h4>
                </div>
                <div class="modal-body">
                  <p>Estou dizendo! OLÁ MUNDO! =D</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
      </div>

    </body>

  <!-- Importando o jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <!-- Importando o js do bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

Browser other questions tagged bootstrap-3 modal

You are not signed in. Login or sign up in order to post.