Question

我从引导文档复制并粘贴了模式对话框。当我单击按钮时，应该出现一个模态。但是模态无法在我的页面中打开。它是什么？也许jquery有问题？

但是在该代码段中，我看到了模式对话框，但是在我的页面中却看不到。当您单击按钮时，滚动条将被删除，仅此而已

'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>

Answer 1

您应该移动这些：

<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>

并将它们粘贴在这些标签之前：

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

那应该可以解决问题。

Bootstrap模态对话框无法打开

1 个答案: