bootstrap-modal 相关问题

是否可以在模态框内显示 Bootstrap Offcanvas？这是我的代码： <p>是否可以在<a href="https://getbootstrap.com/docs/5.0/components/offcanvas/" rel="nofollow noreferrer">Modal</a>内显示Bootstrap <a href="https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal" rel="nofollow noreferrer">Offcanvas</a>？</p> <p>这是我的代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="f695998493b6c4d8cfd8c4">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="77151818030403051607374259475945">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4eaf4e8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Show a "Offcanvas right" by clicking the button below. <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button> </div> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"> <div class="offcanvas-header"> <h5 id="offcanvasRightLabel">Offcanvas right</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> ... </div> </div> <div class="modal-footer"> modal footer </div> </div> </div> </div> <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Hide this modal and show the first with the button below. </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button> </div> </div> </div> </div> <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>请尝试这个</p> <pre><code> <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="e3808c9186a3d1cddacdd1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f7e9f5">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="2b4944445f585f594a5b6b1e051b0519">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title> Museum of Candy </title> <style> .modal-content { overflow: hidden; } .modal-content .offcanvas { position: absolute; } </style> </head> <body> <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Show a "Offcanvas right" by clicking the button below. <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button> </div> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"> <div class="offcanvas-header"> <h5 id="offcanvasRightLabel">Offcanvas right</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> ... </div> </div> <div class="modal-footer"> modal footer </div> </div> </div> </div> <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Hide this modal and show the first with the button below. </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button> </div> </div> </div> </div> <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>  </body> </html> </code></pre> </answer> <answer tick="false" vote="0"> <p>只需在模态容器中添加相对位置类，并在offcanvas中添加绝对位置类即可。</p> </answer> </body></html>

javascript css bootstrap-modal bootstrap-5 bootstrap5-modal

回答 0 投票 0

Bootstrap Modal 显示前绑定事件

我有一个简单的 Bootstrap 模式：我有一个简单的 Bootstrap 模式： <div id="mymodal" class="modal fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... <div> </div> 我已使用数据切换将其附加到按钮 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal"> Toggle</button> 现在，当单击按钮时，模式将显示。模态体包含需要预先填充的 div。我使用下面的代码来执行此操作： $('#mymodal').on('shown.bs.modal', function(){ generate_modal_body(); }) 但是上面的代码不起作用。令人惊讶的是，如果我在模态按钮上添加 click 事件，它可以触发 generate_modal_body()。我在这里检查过类似的问题，但找不到满意的答案。如果我遗漏了一些明显的东西，请告诉我。您必须使用正确的模式事件：请将引导模式显示的事件附加到文档准备功能中。 <script type="text/javascript"> $(document).ready(function () { $('#mymodal').on('shown.bs.modal', function() { generate_modal_body(); }) ; }); </script> 请尝试这个 function openModal() { $('#mymodal').modal('show'); }

jquery bootstrap-modal

回答 3 投票 0

在 ASP.NET Core 中升级到 Bootstrap 5 和 jQuery 3 后，Bootstrap 模式未触发

最近在我的 ASP.NET Core 项目中将 jQuery 从 v2.2.4 更新到了 v3.7.1，将 Bootstrap 从 v2.2.2 更新到了 v5.0.2。更新后，我遇到了一个问题，即当按钮...

jquery asp.net-core bootstrap-modal bootstrap-5

回答 1 投票 0

表单提交时引导模式关闭

我在livewire中有一个引导模式，我希望有一种在表单提交成功时关闭模式的行为，但不知道该怎么做，我不能放置数据关闭，因为表单有

laravel bootstrap-4 bootstrap-modal laravel-livewire

回答 4 投票 0

Bootstrap 5 - 隐藏模式不会删除背景

使用 Bootstrap 5 创建我的模态： var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), { 背景：“静态” }); myModal.show(); 在另一个功能上我想...

javascript bootstrap-modal bootstrap-5

回答 4 投票 0

Bootstrap modal.show() 立即触发，而不是异步等待

我有一个表单提交，调用如下 API 我有一个表单提交，调用类似的 API <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="Send();" > Invia </button> Send()函数在哪里 function Send() { var select_file = document.getElementById("formFile").files[0]; var select_project_name = document.getElementById("selec-div").value; var pacchetto_id = document.getElementById("pacchetto").value; var versione_id = document.getElementById("versione").value; var file_string = "https://<xxxx>.it/api/; console.log(file_string); var formData = new FormData(); formData.append("file", select_file); fetch(file_string, { method: "PUT", headers: { "PRIVATE-TOKEN": TOKEN, }, body: formData, }) .then((response) => response.json()) .then((data) => { console.log("File uploaded successfully:", data); if (data["message"] == "201 Created") { modal.show(); } }) .catch((error) => { console.error("Error uploading file:", error); }); } 我的问题是，模式在我单击按钮后立即打开，而不是在 data["message"] == "201 Created" 之后显示基本上，即使我在文件实际上传时看到console.log("File uploaded successfully:", data);，而是在单击按钮后立即显示模式您需要从 data-bs-* 中删除 button 属性，因为它们会自动触发模态，并且仅使用 JS 显示/隐藏模态： <button class="btn btn-primary w-100" onclick="Send();" > Invia </button> JS模态实例： const modal = new bootstrap.Modal('#exampleModal'); 演示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body class="p-3 m-0 border-0 bd-example m-0 border-0">  <form abineguid="06622E9DA1A84EF183141C48C5CDF885"> <div class="mb-3"> <label for="recipient-name" class="col-form-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="mb-3"> <label for="message-text" class="col-form-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> <button class="btn btn-primary w-100" onclick="Send(event);" > Invia </button> </button> </form>  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script> const modal = new bootstrap.Modal('#exampleModal'); function Send(e) { e.preventDefault() var file_string = "https://jsonplaceholder.typicode.com/todos"; console.log(file_string); fetch(file_string) .then((response) => response.json()) .then((data) => { console.log("File uploaded successfully:", data); modal.show(); }) .catch((error) => { console.error("Error uploading file:", error); }); } </script> </body> </html>

modal-dialog bootstrap-modal bootstrap-5

回答 1 投票 0

Android webview 使用引导模式拉刷新问题

我在使用 webview 的 Android 应用程序时遇到问题。我已将 webview 包装在 swiperefreshlayout 中：我在使用 webview 的 Android 应用程序时遇到问题。我已将 webview 包装在 swiperefreshlayout 中： <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swiperefresh" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> 当刷新被触发时，webview 会重新加载。这对我来说大多数时候都很有效。我遇到的问题是，当网页滚动到顶部，并且打开高于网络视图的模式时。当在模式中向下滚动时，一切正常，但当尝试向上滚动时，就会出现问题。拖动刷新被触发。据我所知，这是因为模态后面的网页滚动到顶部，它认为应该刷新。有人知道如何解决这个问题吗？当webview滚动Y不为0时，需要禁用下拉刷新。请检查以下代码： pullToRefresh.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { if (webView.getScrollY() == 0) pullToRefresh.setEnabled(true); else pullToRefresh.setEnabled(false); } }); 使用此功能，您在网络视图中滚动到顶部时将不会看到问题。我遇到的唯一解决方案是禁用具有 Bootstrap 模式的网站的滑动刷新。基本上，我们将使用 webView.evaluateJavascript() 函数注入 javaScript 代码来检测 Bootstrap 模态。 webView.evaluateJavascript( "(function() { " + "var modals = document.querySelectorAll('.modal'); " + "if (modals.length > 0) { " + "window.androidInterface.hasBootstrapModals(true); " + "} else { " + "window.androidInterface.hasBootstrapModals(false); " + "} " + "})()", null); webView.addJavascriptInterface(new WebAppInterface(), "androidInterface"); public class WebAppInterface { @JavascriptInterface public void hasBootstrapModals(boolean hasModals) { // Disable swipe-to-refresh if modals are present if (hasModals) { disableSwipeToRefresh(); } else { enableSwipeToRefresh(); } }} JavaScript 代码会扫描 DOM 中 .modal 类的元素，该类通常与 Bootstrap 模态相关联，如果找到模态，将使用布尔值调用 hasBootstrapModals 函数。注意：在调用之前请确保页面已加载 webView.evaluateJavascript

android webview bootstrap-modal

回答 2 投票 0

在 React 中触发 Bootstrap 模态而不使用 npm react-bootstrap

我尝试使用 Bootstrap5 在 React.js 中编写 Modal，但由于多种原因我无法使用 npm react-bootstrap。我尝试了一种方法，使用状态来设置模态类，并使用一个有效的按钮...

javascript reactjs bootstrap-modal react-bootstrap bootstrap-5

回答 2 投票 0

在 Bootstrap 5 模式中使用 formvalidation.io

我正在使用 AJAX 将远程页面加载到 Bootstrap 5 Modal 中打开模态的代码：打开我正在使用 AJAX 将远程页面加载到 Bootstrap 5 Modal 中打开模式的代码： <button type="button" data-id="5" class="btn btn-status">Open</button> <div class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" id="support_modal"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Support Ticket</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"></div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('.btn-status').click(function () { var custId = $(this).data('id'); $.ajax({ url: 'driver_support.php', type: 'get', data: { custId: custId }, success: function (response) { $('.modal-body').html(response); $('#support_modal').modal('show'); } }); }); }); </script> 但是这按预期工作... 我在模式（driver_support.php）中加载的页面正在使用 formvalidation.io 来验证表单。直接在浏览器中查看页面时，验证工作正常当页面通过 AJAX 加载到模式中时，它不会验证表单。控制台中没有错误。页面中的代码加载到模式中（driver_support.php）： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Support Ticket</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="formvalidation/dist/css/formValidation.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script> <script src="formvalidation/dist/js/FormValidation.min.js"></script> <script src="formvalidation/dist/js/plugins/Bootstrap5.min.js"></script> </head> <body> <form name="tickets" id="tickets" action="my_script.php" method="post"> <div class="mb-3"> <label class="form-label text-dark">Post a reply</label> <textarea class="form-control" rows="3" name="message"></textarea> </div> <button type="submit" class="btn btn-lg btn-primary">Reply</button> </form> <script> document.addEventListener('DOMContentLoaded', function (e) { FormValidation.formValidation(document.getElementById('tickets'), { fields: { message: { validators: { notEmpty: { message: 'Please enter a message' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), submitButton: new FormValidation.plugins.SubmitButton(), defaultSubmit: new FormValidation.plugins.DefaultSubmit(), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: '.mb-3', }), }, }); }); </script> 感谢您的宝贵时间。问题是当您使用 AJAX 加载页面时，验证脚本在文档加载侦听器下执行： document.addEventListener('DOMContentLoaded', function (e) { //... 并且由于它共享相同的document，DOM 已经加载，因此它永远不会执行。随着加载页面中的脚本同步加载，您可以简单地删除侦听器，并让代码在 JQ 将其添加到模态后立即运行： // remove the listener //document.addEventListener('DOMContentLoaded', function (e) { FormValidation.formValidation(document.getElementById('tickets'), {

bootstrap-modal bootstrap-5 formvalidation.io

回答 1 投票 0

使用 Bootstrap 和 popper js 的 Angular 模型组件

我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开添加跟踪... 我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开 <button (click)="toggleForm()" class="btn btn-primary">Add Tracking</button> <div id="trackingModal" class="modal fade" tabindex="-1" *ngIf="showForm"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add Tracking</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" (click)="toggleForm()"></button> </div> <div class="modal-body"> <form *ngIf="showForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="receiver">Receiver</label> <input type="text" class="form-control" id="receiver" [(ngModel)]="newShipmentData.receiver" name="receiver" required /> </div> <div class="form-group"> <label for="price">Price</label> <input type="number" class="form-control" id="price" [(ngModel)]="newShipmentData.price" name="price" required /> </div> <div class="form-group"> <label for="pickupTime">Pickup Time</label> <input type="datetime-local" class="form-control" id="pickupTime" [(ngModel)]="newShipmentData.pickupTime" name="pickupTime" required /> </div> <div class="form-group"> <label for="distance">Distance</label> <input type="number" class="form-control" id="distance" [(ngModel)]="newShipmentData.distance" name="distance" required /> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" (click)="toggleForm()"> Close </button> </div> </div> </div> </div> 这是 traking.ts 代码 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { ShipmentData, TrackingService } from "../tracking.service"; import { ShipmentStatusPipe } from "../shipment-status.pipe"; @Component({ selector: "app-tracking", standalone: true, imports: [FormsModule, CommonModule, ShipmentStatusPipe], templateUrl: "./tracking.component.html", styleUrls: ["./tracking.component.css"], }) export class TrackingComponent implements OnInit { // eslint-disable-next-line @typescript-eslint/no-explicit-any shipments: ShipmentData[] = []; // Temporary - adjust based on your service showForm = false; newShipmentData!: ShipmentData; @ViewChild("trackingModal") trackingModal!: ElementRef; constructor(private trackingService: TrackingService) {} ngOnInit() { this.trackingService.getAllShipment().then((shipments: ShipmentData[]) => { this.shipments = shipments; }); this.newShipmentData = { sender: "", receiver: "", price: "0", pickupTime: Date.now(), deliveryTime: 0, distance: 0, isPaid: false, status: 0, }; } toggleForm() { this.showForm = !this.showForm; console.log(this.trackingModal, this.showForm); } async onSubmit() { try { // Call your service to create the shipment await this.trackingService.createShipment(this.newShipmentData); // Handle success (e.g., close the form, display a success message) this.showForm = false; console.log("Shipment created successfully"); // Reset the form this.newShipmentData = { sender: "", receiver: "", price: "0", pickupTime: Date.now(), deliveryTime: 0, distance: 0, isPaid: false, status: 0, }; } catch (error) { // Handle errors from the TrackingService console.error("Error creating shipment:", error); } } } 现在，当我单击“添加跟踪”按钮时，模式不会出现流程是这样的首先用户单击添加跟踪按钮带有表格的模型将打开并询问详细信息当用户填写详细信息时，它将与跟踪服务交互您的代码中的一切都很完美。即使我在本地添加了你的代码。也许你的元素隐藏在其他元素后面或者某些CSS被覆盖。您能否提供 stackbiltz，以便提供更多帮助。

angular forms bootstrap-modal

回答 1 投票 0

导航栏未出现在结果中？

我正在学习 Angular 15.0.0，我遇到了一个问题导航栏没有出现，为什么除了食谱书之外什么也没有出现代码 &... 我正在学习 Angular 15.0.0，我遇到了一个问题导航栏没有出现，为什么除了食谱书之外什么也没有出现代码 <nav class = "navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class ="navbar-brand">Racipe Book!</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Recipes</a></li> <li><a href="#">Shopping list</a></li> </ul> <ul class = "nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" role = "button"> Manage <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">saving data</a></li> <li><a href="#">fetch data</a></li> </ul> </li> </ul> </div> </div> </nav> 它看起来是这样的：我尝试降级 Bootstrap 但不起作用，并尝试使用 ng-bootstrap 包来包含基于 Angular 的 Bootstrap 组件。也不起作用，在终端中都给出了错误应该是这样的：您错过了.navbar-expand课程。导航栏 - 它是如何工作的 |引导程序 5 导航栏需要用 .navbar 包裹 .navbar-expand{-sm|-md|-lg|-xl|-xxl}，以实现响应式折叠和配色方案类。此外，您应该需要一个按钮切换来显示/隐藏可折叠部分。确保您已导入： popper.min.js 和 bootstrap.min.js 文件 bootstrap.bundle.min.js 为了让折叠功能发挥作用。参考：Bootstrap 5 下拉菜单在 Angular 12 上不起作用完整代码： <nav class="navbar navbar-default navbar-expand-lg"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand">Racipe Book!</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"><a class="nav-link" href="#">Recipes</a></li> <li class="nav-item"> <a class="nav-link" href="#">Shopping list</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" role="button" data-bs-toggle="collapse" data-bs-target="#navbarManageContent" > Manage <span class="caret"></span ></a> <ul class="dropdown-menu" id="navbarManageContent"> <li class="nav-item"> <a class="nav-link" href="#">saving data</a> </li> <li class="nav-item"> <a class="nav-link" href="#">fetch data</a> </li> </ul> </li> </ul> </div> </div> </nav> 演示@StackBlitz

angular bootstrap-modal navbar

回答 1 投票 0

更改 twitter bootstrap 模态的标题背景颜色

我正在尝试使用以下 css 代码更改 twitter bootstrap 模式标题的背景颜色。 .modal-header { 内边距：9px 15px；边框底部：1px实心#eee；背景-

css twitter-bootstrap bootstrap-modal

回答 10 投票 0

打开 Bootstrap Modal 将冻结整个页面（角度）

我有一张引导卡，我想在单击它时打开一个模式：我有一张引导卡，我想在单击它时打开一个模式： <div class="row"> <div class="col-lg-6" *ngFor="let newsItem of filteredNews"> <div class="box"> <div class="card mb-3" data-bs-toggle="modal" data-bs-target="#newsModal" (click)="this.selectedItem = newsItem" role="button"> <div class="row g-0"> <div class="col-md-4"> <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5> </div> </div> </div> </div> </div> </div> </div>  <div #newsModal class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> <p>{{ selectedItem?.summary }}</p> </div> </div> </div> </div> 单击卡片将打开模式，但也会冻结整个页面（并将其变成灰色）。我尝试了此论坛上发布的方法，但没有成功。感谢您的帮助！当模态关闭时，模态背景消失。 <div class="row"> <div class="col-lg-6" *ngFor="let newsItem of filteredNews"> <div class="box"> <div class="card mb-3" (click)="openModal(newsItem)" role="button"> <div class="row g-0"> <div class="col-md-4"> <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5> </div> </div> </div> </div> </div> </div> </div>  <div class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;"> <p>{{ selectedItem?.summary }}</p> </div> </div> </div> </div> 在组件 TypeScript 文件中，添加以下函数： import { Component } from '@angular/core'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { selectedItem: any; openModal(newsItem: any) { this.selectedItem = newsItem; $('#newsModal').modal('show'); // Make sure to include jQuery } } 确保在您的项目中包含 jQuery，以便此解决方案能够正常工作 (npm install jquery 并将其包含在您的 angular.json 文件中）。

html angular bootstrap-modal

回答 1 投票 0

bootstrap-modal 相关问题

最新问题