Bootstrap 4模式不使用锚标记

Question

我用bootstrap 3尝试了这个，它工作正常。我正在使用bootstrap 4尝试相同的操作，当我单击通过锚标记创建的两个按钮时，模态不会出现。

我已经看到类似的帖子有同样的问题，但他们主要涉及错误地使用。对于与ID相对的类引用。但对我来说情况并非如此，我也尝试过将实际的modal.css和脚本链接到modal.js文件，但那些也没有用。

    <div id="updateCred">

      <header>Update Credentials</header>
      <p> Please Choose to Update Your Username/Password </p>
      <div id="updateCred">

        <header>Update Credentials</header>
        <p> Please Choose to Update Your Username/Password </p>

        <a href="#usernameModal" class="btn btn-lg btn-light" data- toggle="modal" data-target="#usernameModal">Update Username</a>
        <a href="#passModal" class="btn btn-lg btn-light" data-toggle="modal" data-target="#passModal">Update Password</a>

        <!-- Modal -->
        <div id="usernameModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Change Username</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>

        <!-- Modal -->
        <div id="passModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Change Password</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>
    </div>

Answer 1

我发现它是什么。

您需要添加jquery和bootstrap.js脚本

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

 <script src="bootstrap-4.0.0/dist/js/bootstrap.js"></script>