CODEWITHSUNDEEP
javascripthtmlmodal-dialog
CRushER16
CRushER16

Reputation: 3

Simple Modal Won't Show

I know this is probably a really simple, dumb issue, but I've searched around and can't seem to figure out what my problem is. I copied and pasted the example straight from the bootstrap website, and I can't get a modal to pop up on the screen no matter what I do.

Codepen at https://codepen.io/anon/pen/Pdrvoa

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Webpage</title>
  <link href='bootstrap.min.css' rel='stylesheet' type='text/css' />
  <script href='bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 0

Views: 186

Answers (2)

broccoli_rob
broccoli_rob

Reputation: 550

I would check the location of your JS/CSS files. Looks like a funky path you have in there; make sure you're pointing to the right folder or using an up-to-date cdn (the examples on their website use cdns I believe).

Just for reference, you can use https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css for the stylesheet and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js for the javascript. Also make sure you have a jQuery reference in there (https://code.jquery.com/) as this is needed for much of bootstrap's javascript functionality.

Note: Be sure to add the reference to jQuery BEFORE the reference to boostrap.js!

EDIT

I see Leo Rossetti just beat me to it, use his example as it appears to work.

Upvotes: 0

Leo Rossetti
Leo Rossetti

Reputation: 185

Your problem is the references of bootstrap. Look at that example.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Webpage</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Related Questions