引導模式不顯示，只有黑色背景
[英]Bootstrap modal not showing, only black background
問題描述
我正在嘗試修復我曾經可以工作的編輯訂閱模式，但由於某種原因，它不會出現。 我有另一種具有相同 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">×</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>
任何幫助將非常感激！
1 個解決方案
解決方案1
0 2020-12-01 07:13:15
您尚未包含打開模式的代碼。
假設您已按照 文檔中的示例進行操作，那么您應該有一個帶有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>
bootstrap vue 模態黑色背景
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.