twitter-bootstrap - 无法在同一页面中使用两个 Bootstrap 模态

Question

我正在尝试为同一页面中的两个独立模式创建两个独立按钮。但是，我只让第一个模态正常工作，而另一个第二个只是使页面背景变暗或变暗，没有模态出现。

这就是我用来做这件事的方法，我已经尝试了很多东西并且我已经玩了很多代码但仍然不知道是什么导致了我面临的这个问题

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#questionBankModal">
            <li class="fa fa-plus fa-fw"></li> New
        </button>


<button type="button" class="btn btn-success" data-toggle="modal" data-target="#testModal">
            <li class="fa fa-plus fa-fw"></li> New
            </button>


<div class="modal fade" id="questionBankModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel1" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New Bank</h4>
                </div>
                <div class="modal-body">
                    <form action="{{ route('postAddNewQuestionBank') }}" method="POST">

                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>

                        <div class="form-group">
                            <label for="message-text" class="control-label">Description</label>
                            <textarea class="form-control" id="description" name="description"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <input type="submit" class="btn btn-primary" value="Add Test">
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="ModalLabel2">New Bank</h4>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('postAddNewTest') }}" method="POST">

                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">Name</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>

                            <div class="form-group">
                                <label for="message-text" class="control-label">Description</label>
                                <textarea class="form-control" id="description" name="description"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <input type="submit" class="btn btn-primary" value="Add Test">
                            </div>
                        </form>
                    </div>

                </div>
            </div>

Answer 1

您的模态框格式不正确:每个模态框都错过了结束符 </div>标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#questionBankModal">
     <li class="fa fa-plus fa-fw"></li> New
</button>


<button type="button" class="btn btn-success" data-toggle="modal" data-target="#testModal">
    <li class="fa fa-plus fa-fw"></li> New
</button>

<div class="modal fade" id="questionBankModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel1" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New Bank</h4>
            </div>
            <div class="modal-body">
                <form action="{{ route('postAddNewQuestionBank') }}" method="POST">

                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name">
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">Description</label>
                        <textarea class="form-control" id="description" name="description"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Add Test">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="ModalLabel2">New Bank</h4>
            </div>
            <div class="modal-body">
                <form action="{{ route('postAddNewTest') }}" method="POST">

                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name">
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">Description</label>
                        <textarea class="form-control" id="description" name="description"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Add Test">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>