CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
fiorentina.gf
fiorentina.gf

Reputation: 57

Bootstrap modal dialog does not open

I copied and pasted modal dialog from bootstrap docs. When I click on the button, a modal should appear. But modal does not open in my page. What is it? Maybe problem with jquery?

But in that snippet i see modal dialog but in my page i cannot see that. When you click on the button, Scroll bar are removed and that`s all

'use strict';

// Listening for clicks on each button

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Pricing example · Bootstrap</title>

    <!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.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.4.0/js/bootstrap.min.js"></script>

  </head>
  <body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="btn-modal text-dark" href="#">Add product</a>
  </nav>
  <a class="btn btn-outline-primary" href="#">Sign up</a>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      



        <form>
            Name:<br>
            <input type="text" name="name" id="name"><br>
            Price:<br>
            <input type="number" name="price" value="1" id="price"><br><br>
        </form>
            <button class="btn btn-primary" data-action="ADD_TO_PRODUCT">Add To Product</button>

<div class="actions">

</div>
  <div class="products card-columns">
  </div>

  <h2 class="text-center">Cart</h2>
  <div class="cart">

  </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                     asdadssadsadsadsasadsad
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>

  <footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row">
      <div class="col-12 col-md">
        <small class="d-block mb-3 text-muted">&copy; 2017-2019</small>
      </div>
  </footer>

</div>

<script src="js/script.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Upvotes: 0

Views: 824

Answers (1)

Laura Soto
Laura Soto

Reputation: 11

You should move these:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

and paste them before these tags:

<script src="js/script.js"></script>
<script src="js/main.js"></script>

That should solve the problem.

Upvotes: 1

Related Questions