bootstrap 模式不会在页面加载时打开

Question

我的 bootstrap 模式无法在页面加载时打开我不知道为什么。打开模式的按钮仍然有效。

我的代码：

<div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <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>

    window.onload = function() {
                $('#myModal').modal('show');
    }

Answer 1

您的案例可能已经被回答了一千次，但请考虑以下几个原因：

你的图书馆的顺序，他们在正确的位置吗？
也许你忘了包括 bootstrap.js
考虑加入 popper.js 如果有帮助请告诉我

Answer 2

试试这个代码，它对我有用。它是用 bootstrap 5.1:

构建的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>Document</title>
</head>

<body>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <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>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <script src="jquery-3.6.0.js"></script>

    <script>
        window.onload = function() {
            $('#myModal').modal('show');
        }
    </script>

</body>

</html>

bootstrap 模式不会在页面加载时打开

bootstrap modal wont open on page load

html

javascript

css

bootstrap-modal

bootstrap-4