bootstrap-modal 相关问题

Bootstrap提供了一个JavaScript驱动的对话框元素，可用于替换原生对话框（在某种程度上）;与原生对话框不同，Bootstrap模式不能阻止执行流程。

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

laravel bootstrap-4 bootstrap-modal laravel-livewire

回答 4 投票 0

使用 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 4 中的全宽轮播中使用模态。我应该怎么做才能使其工作？

我正在尝试在全角轮播中使用模式。它没有按预期正确显示。这是代码。 ''' 我正在尝试在全角轮播中使用模式。它没有按预期正确显示。这是代码。 ''' <div id="carouselExampleControls" class="carousel slide customSlide slides" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active slides slidePadding"> <p class="headline">Team</p> <div class="teamsSlide1"> <div class="gallery-image eventCard teamGroupImgContainer"> <img src="../static/images/Gallery/11.jpg" alt="" class="carousel-img eventCardImg teamGroupImg"> <button class="edit-icon insideEvent insideTeamSlide1" data-toggle="modal" data-target="#teamEdit"> <img src="../static/icons/edit-icon-pen.svg" class="pen"> </button>  <div class="modal" id="teamEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>  </div> <div class="teamQuote"> <p class="quoteStatemenr">“Coming together is a beginning staying together is progress, working together is success”</p> <p class="quoteAuthor">-Henry Ford</p> </div> </div> </div> <div class="carousel-item slide"> <div class="teamMembersPage1"> </div> </div> <div class="carousel-item slide"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon customArrow leftArrow" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon customArrow" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> ''' 这就是我得到的。模态弹出窗口也获得了淡入淡出效果。我应该怎么做才能使模态像往常一样工作？将 z-index="1000" 添加到 .modal-dialog <div class="modal" > <div class="modal-dialog" style="z-index: 1000"> </div> </div>

html css bootstrap-4 bootstrap-modal bootstrap-carousel

回答 1 投票 0

Bootstrap 模式在 laravel js 文件中不起作用

我使用的是 Laravel 9，我已经安装了 Bootstrap、Tailwind、jQuery 和 Vite。这是我的 vite.config.js 文件：从“vite”导入{defineConfig}；从“laravel-vite-plugin”导入 laravel；导入拍...

php jquery laravel bootstrap-modal laravel-9

回答 2 投票 0

Bootstrap 模态打开时无法获得模糊背景

我正在使用 Bootstrap 5.1.3，我想在使用 CSS background-filter 属性打开模态时模糊背景。我尝试过的最简单的方法是： .modal-背景{ 背景过滤器：b...

html css twitter-bootstrap bootstrap-modal blur

回答 2 投票 0

Bootstrap 5.3 可滚动模态，正文中有表单，页脚有提交按钮

我正在尝试创建一个可滚动的模式对话框，其中包含模态主体中的表单。这是一个很长的垂直形式，所以我想利用模态页脚部分来容纳提交按钮，因为它......

forms bootstrap-modal bootstrap-5

回答 1 投票 0

为什么我的模态没有填充我的所有数据

请不要对此投反对票。我是 Bootstrap 模式的新手，试图找出我出错的地方。我目前有这段代码将显示数据表。第一列数据

php bootstrap-modal

回答 1 投票 0

关闭引导模式后重置它

我在我的vue应用程序中使用了引导模式，在模式内部我有输入字段，当我输入数据时提交数据并在重新打开所有先前的输入后关闭模式...

vue.js bootstrap-modal bootstrap-5

回答 1 投票 0

在页面上移动 Bootstrap 模式

我的屏幕上有一个引导模式。当模态显示时，它位于屏幕的中央。 &... 我的屏幕上有一个引导模式。当模态框显示时，它位于屏幕中央。 <div class="modal fade" id="ua_dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-body"> .... </div> </div> 我需要在屏幕上移动模态，因为覆盖了屏幕上的一些信息。用户应该能够向右、向左移动……等等。我可以这样做吗？有一些我可以使用的设置吗？或者用js？什么是最好的方法？谢谢！我想你需要这个:) <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <script> $('.modal').modal({ keyboard: false, show: true }); // Jquery draggable $('.modal-dialog').draggable({ handle: ".modal-header" }); </script> .modal-content{ margin-top:50px !important; } Espero les ayude este código，trate de integrar a mi proyectodraggable，pero no pude，ya que mi jqueryera incompatible，así quebuscando pude encontrar la solución con el manejo de eventos，y este es el resultado： /*------------------------------------------------------------- Llamada al evento*/ draggable(document.querySelector('#mimodal'), '.modal-head') /*------------------------------------------------------------- Mover modal*/ function mover_mouse({ movementX, movementY }) { let getContainerStyle = window.getComputedStyle(mover_modal) let leftValue = parseInt(getContainerStyle.left) let topValue = parseInt(getContainerStyle.top)`enter code here` mover_modal.style.left = `${leftValue + movementX}px` mover_modal.style.top = `${topValue + movementY}px` } const draggable = (id, handle) => { mover_modal = id window.jQuery(handle).on('mousedown', () => { mover_modal.addEventListener('mousemove', mover_mouse) }) window.jQuery(handle).on('mouseup contextmenu', () => { mover_modal.removeEventListener('mousemove', mover_mouse) }) }

bootstrap-modal

回答 3 投票 0

将 jquery 添加到 VueJS 3，以实现 Bootstrap 5 兼容性以使用模式

我研究得越多，我就越困惑，所以请在投票之前记住这一点。而且大多数超过 5 分钟的资源大多毫无用处，这也无济于事。洙原来是我

vuejs3 bootstrap-modal bootstrap-5

回答 1 投票 0

如何避免 ng-bootstrap ngbModal 组件内的键绑定传播？

为了使页面符合 ADA，我们需要能够通过在“OPEN”按钮上单击/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。为了保持页面符合 ADA，我们需要能够通过单击“打开”按钮上的/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 <div (keyup.enter)="openModal($event)" (keyup.space)="openModal($event) (click)="openModal($event)">Open Modal</div> 模态页面内： <button>Close</button> 按关闭按钮上的 Enter 键将关闭模态框，返回到调用的 div 元素并重新执行 ENTER 键并再次重新打开模态框。我在 openModal 函数内和模态本身内尝试了 stoppropagation、return false、cancelbubble，但均无济于事，绑定的 ENTER 键不断在两个页面上/下冒泡。我能够通过模态中的以下实现来解决它： @HostListener("document:keydown", ["$event"]) onKeydownHandler( event: KeyboardEvent ) { if(event.key === "Enter"){ event.preventDefault(); event.stopImmediatePropagation(); } } 为“document:keydown”添加 PreventDefault() 或 stopImmediatePropagation() 将会影响页面的其他正常功能。相反，只需添加 setTimeout() 并设置 200ms 的计时器即可。

bootstrap-modal keypress ng-bootstrap stoppropagation

回答 2 投票 0

当转到上一个链接时，Rails 中的 Bootstrap 模式会自动打开

我一直在关注这个视频教程系列，使用 Bootstrap v5.3 作为 CSS 框架并在 javascript 端使用 Stimulus(Turbo) 创建 Rails 7 应用程序。基本上，我想要一个引导模式......

ruby-on-rails bootstrap-modal ruby-on-rails-7 turbo-frames

回答 1 投票 0

bootstrap-modal 相关问题

最新问题