无法在同一页面中运行两个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

如果你的背景阴影更暗，这意味着第二个Modal工作正常。 它可以隐藏在第一个Modal后面，也可以正确设置z-index（Second Modal）。 如果你创造小提琴，这可能很容易！

Answer 2

您的模式格式不正确：每个模型都会错过结束</div>标记。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;