twitter-bootstrap - Bootstrap 模式根本不起作用

Question

我知道这个问题之前已经被问过数百次了，我也经历过这些问题，但这些都无法解决我的问题:s

到目前为止，这是我的代码

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
    <link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen">
    <link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen">
    <link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">

在体内我有这个:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

请注意，我在 head 部分使用了其他一些库，因为我可能需要它们用于 Google Map，我试图删除它们但仍然没有触发 Modal View 。

Answer 1

检查 Bootstrap 的版本。请注意，在 bootstrap 5 中将 data-toggle 更改为 data- BS -toggle and data-target to data- BS -目标