个人中心
gpt4 book ai didi

jquery - Bootstrap 模态对话框未打开

转载 作者：太空宇宙 更新时间：2023-11-04 06:20:28 24 4
gpt4 key购买 nike

我从 bootstrap 文档中复制并粘贴了模态对话框。当我点击按钮时，应该会出现一个模式。但是模式不会在我的页面中打开。它是什么？可能是 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>

最佳答案

你应该移动这些:

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

这应该可以解决问题。

关于jquery - Bootstrap 模态对话框未打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55563079/

24 4 0
文章推荐： php - 无论窗口大小如何，我都需要将背景颜色灰色向下移动以覆盖页面的长度
文章推荐： c - 指针操作和类型转换
文章推荐： c - 有序树遍历递归到迭代
文章推荐： php - 在上下菜单上限制数字输入以消除重复项时遇到问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com