引导模式不显示，只有黑色背景

Question

我正在尝试修复我的编辑订阅模式，它曾经可以工作，但由于某种原因，它不会出现。我有另一种具有相同 HTML 格式的模式，并且效果很好。我检查了开发工具，这就是我发现的。

打开并检查黑色背景元素后，我在 devtools 上的编辑计划模式：

<div class="modal fade show" id="edit-plan-modal" tabindex="-1" aria-labelledby="edit-modalLabel" aria-modal="true" role="dialog" style="display: block;">
            <div class="modal-dialog">
                <div class="modal-content">
                     
                    <form action="http://127.0.0.1:8000/plans/1" method="POST" enctype="multipart/form-data">
                        <div class="modal-header">
                            <h5 class="modal-title font-weight-bold" id="edit-modalLabel">Edit Product</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                                <input type="hidden" name="_token" value="upHBG4qzAEmLNVE69jN885JYNlAEJkUD2mkm1pX3">                                    <input type="hidden" name="_method" value="PATCH">                                    
                                <input type="hidden" name="plan_id" id="plan-id" value="1">
                            <div class="form-group">
                                <label for="plan-name">Plan Name</label>
                                <input type="text" style="border-bottom: 1px solid #B9C1C2;" class="form-control" id="plan-name" name="plan-name" placeholder="Enter product name here" required="">
                            </div>

                            <div class="form-group">
                                <label for="plan-price">Plan Price</label>
                                <input type="number" step=".01" style="border-bottom: 1px solid #B9C1C2;" class="form-control" id="plan-price" name="plan-price" placeholder="Enter price (in Philippine Pesos)" required="">
                            </div>
                    
                            <div class="form-group">
                                <label for="product-description">Short Plan Description</label>
                                <textarea style="border-bottom: 1px solid #B9C1C2;" class="form-control" id="plan-description" name="plan-description" rows="3" required="" maxlength="150"></textarea>
                            </div>
                            <div align="right"> 
                                <button style="width:30%" type="submit" class="btnmodal">Save Changes</button>
                                <a href="#" style="padding-left:30px;" class="text-danger mr-3" data-dismiss="modal">Cancel</a>
                            </div>
                        </div>
                    </form>
                    
                </div>
            </div>
        </div>

打开它并检查黑色背景元素时我的编辑订阅模式：

<div class="modal-backdrop fade show"></div>

我不知道为什么会这样，因为我用于两者的 HTML 代码是相同的，我只更改了 ID 和名称。这是编辑订阅模式的 HTML 代码：

<div class="modal fade" id="edit-subscription-modal" tabindex="-1" aria-labelledby="edit-modalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title font-weight-bold" id="edit-subscription-modalLabel">Edit
                                    Subscription</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="{{ route('subscriptions.update', $subscription->id) }}" method="POST"
                                    enctype="multipart/form-data" id="edit-subscription-form">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="subscription_id" id="edit-subscription-id">
                                </form>
                                <div class="form-group">
                                    <label for="customer-id">Customer Name</label>
                                    <select class="form-control" id="customer-id" name="customer-id" form="edit-subscription-form">
                                        @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}">
                                            {{ $customer->firstName . ' ' . $customer->lastName }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="user-id">Assigned To</label>
                                    <select class="form-control" id="user-id" name="user-id" form="edit-subscription-form">
                                        @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="product-id">Choose a Product</label>
                                    <select class="form-control" id="product-id" name="product-id" form="edit-subscription-form">
                                        @foreach ($products as $product)
                                        <option value="{{ $product->id }}">{{ $product->name }}
                                            ({{ $product->plan->name }},
                                            PHP{{ $product->plan->price }}) -
                                            {{ $product->description }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="start-date">Start Date</label>
                                    <input type="date" class="form-control" id="start-date" name="start-date"
                                        required form="edit-subscription-form"></input>
                                </div>
                                <div class="form-group">
                                    <label for="end-date">End Date</label>
                                    <input type="date" class="form-control" id="end-date" name="end-date"
                                        required form="edit-subscription-form"></input>
                                </div>
                                <div class="form-group">
                                    <label for="payment-terms">Payment Terms (Billing Cycle)</label>
                                    <select class="form-control" id="payment-terms" name="payment-terms" form="edit-subscription-form">
                                        <option value="Monthly">Monthly (1 Month After Start Date)
                                        </option>
                                        <option value="1 Month Before End Date">1 Month Before End Date
                                        </option>
                                        <option value="2 Months Before End Date">2 Months Before End Date</option>
                                        <option value="3 Months Before End Date">3 Months Before End
                                            Date</option>
                                        <option value="Due on End Date">Due on End Date</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="subscription-tax">Tax</label>
                                    <select class="form-control" id="subscription-tax" name="subscription-tax" form="edit-subscription-form">
                                        <option value="0.12">12%</option>
                                        <option value="0">No Tax</option>
                                    </select>
                                </div>
                                @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif
                                <div align="right">
                                    <button type="submit" class="btnmodal" style="width:30%; " form="edit-subscription-form">Save
                                        Changes</button>
                                    <a href="#" style="padding-left:30px;"
                                        class="text-danger mr-3 text-decoration-none"
                                        data-dismiss="modal">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

这是我的 app.blade 文件的 head 标签中的内容：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>Recurring Management System</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

{{-- fontawesome --}}
<script src="https://kit.fontawesome.com/3f17d5961c.js" crossorigin="anonymous"></script>

这些是</body> 标签之前的必要引导脚本：

{{-- JQuery, then Popper, then bootstrap --}}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

任何帮助将不胜感激！

Answer 1

您尚未包含打开模式的代码。
假设您已经按照documentation 中的示例进行操作，那么您应该有一个带有data-target 属性的按钮元素，该属性引用要显示的模式的id。这个 data-target 值是 bootstrap.js 用来查找模态的。如果您更改了模式的id，您还必须更新按钮的data-target

您的按钮应如下所示：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#edit-subscription-modal">
  edit subscription
</button>