modal-dialog 相关问题

从QDialog中引发一个可以移动的子窗口（QWidget）？

当阅读https://www.pythonguis.com/tutorials/creating-multiple-windows/时，我可能太字面地理解了以下内容： 在 Qt 中，任何没有父级的小部件都是一个窗口。这意味着，要展示...

我正在尝试使用 Javascript 动态添加文本到对话框，但它不起作用

const myLibrary = ['哈利波特','小东西之神']; 函数书（）{ // 构造函数... for (让 myLibrary 的书) { // 将书籍元素添加到对话框中。创建一个对话框...

如何防止具有 shell 导航和模态的 Maui 应用程序中的窗口标题重叠？

我正在开发一个带有 shell 导航和模态的毛伊岛应用程序，我遇到了窗口标题重叠的问题。使用 shell 导航从主页导航到另一个页面时，...

如何将表单传递到 Angular Material 对话框

我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义一个这样的表单： 我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义这样的形式： <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)"> <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="date" ngModel required> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <mat-error *ngIf="myForm.controls.date.invalid && myForm.controls.date.touched">Please choose a date.</mat-error> </mat-form-field> <mat-form-field> <input matInput placeholder="First Name" name="firstName" ngModel required> <mat-error *ngIf="myForm.controls.firstName.invalid && myForm.controls.firstName.touched">Please enter a first name.</mat-error> </mat-form-field> <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">Submit</button> </form> 在我的 .ts 文件中，我有一个打开对话框的方法： @ViewChild('myForm', { static: true }) public myForm: ElementRef; public openDialog(): void { const dialogRef = this.dialog.open(FilterFormDialogComponent, { width: '460px', disableClose: true, autoFocus: false, panelClass: 'form-dialog', data: { form: this.myForm // reference to the form previously defined }, }); } 在我的filterFormDialogComponent中，我尝试使用ng-content在其html中可视化插入的表单。但是，我无法想象该表格。 是否可以使用 MAT_DIALOG_DATA 将表单或其他组件传递到对话框中？如果是这样，如何将其正确显示到对话框的html中？ 您正在将 FormGroupDirective 传递到对话框。您可以尝试像这样在对话框数据中传递表单 form: this.ngForm.form

如何将数据从父组件传递到ngZorros中的模态

我是ant ng-Zorros的新手，我需要将数据从组件发送到模态，我尝试使用ngzorros的文档，但无法发送数据。我有一个表格组件，其中.. .

引导模式 - 屏幕变黑

我有两个模态框，它们在单击按钮时弹出。一个工作正常，但对于第二个，屏幕只是变黑，没有任何反应： 一、工作模式： 我有两个模式，它们在单击按钮时弹出。一个工作正常，但是对于第二个，屏幕只是变黑，没有任何反应： 一、工作模式： <div id="deleteConfirmation" class="hidden, modal fade"> <div class="modal-dialog"> <div class="modal-content"> <h5>Are you sure you want to delete this contact?</h5> <button id="deleteOk"> Yes </button> <button id="deleteNo"> No </button> </div> </div> </div> 并弹出此命令： $('#deleteConfirmation').modal('show'); 第二个，几乎相同，但不起作用： <div id="addContact" class="hidden, modal fade"> <div class="modal-header"> <h5>Add New Contact</h5> </div> <div class="modal-dialog"> <div class="modal-content"> <label>First Name </label><input /> <br /> <label>Last Name </label><input /> <br /> <label>Address </label><input /> <br /> <label>Phone Number </label><input /> <br /> <button id="addConfirm"> Confirm </button> </div> </div> </div> 命令： $('#addContact').modal('show'); 它基本上是两个相同的模式，但是对于第二个模式，屏幕只是变黑，而第一个模式可以正常工作。我认为这是我正在使用的课程之一。这里似乎出了什么问题？ 您这里有错字： <div id="deleteConfirmation" class="hidden, modal fade"> <div id="addContact" class="hidden, modal fade"> 删除逗号： <div id="deleteConfirmation" class="hidden modal fade"> <div id="addContact" class="hidden modal fade"> 因此脚本无法确定hidden类是否正确应用，最终你不会看到除了黑死屏之外的任何东西！ :O 我在 bootply 创建了一些模态并调整了你的代码，看看这是否有任何帮助。 bootply 示例 我认为这里真正要做的是通过更改以下内容来删除 div 标签中的隐藏类： <div id="deleteConfirmation" class="hidden modal fade"> <div id="addContact" class="hidden modal fade"> 到此 <div id="deleteConfirmation" class="modal fade"> <div id="addContact" class="modal fade"> 如果您浏览引导文档，您将看不到添加隐藏类的位置：http://getbootstrap.com/javascript/#modals 您需要执行此操作来修复。 $("#deleteConfirmation").prependTo("body"); 这个对我有用。 $("#deleteConfirmation").prependTo("body"); 可能是任何 div 内的引导模型，尝试将主体的末端放置:)

显示对话框但没有 ModalBarrier

我有一个在flutter WEB 中运行的应用程序。我需要打开几个屏幕，例如侧面菜单。 我尝试将屏幕作为对话框打开，效果很好。 但我需要打开一个对话框并且仍然拥有所有

React 模态窗口总是会导致父窗口重新渲染吗？

我用React开发过几次模态窗口，一直面临着父组件重新渲染的问题。 例如，我目前正在使用MUI和react-transition-group来...

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"> <!-- Example Code --> <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> <!-- Modal --> <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>

使用 Ajax 时，Laravel 中的 Modal Flowbite 无法关闭

我使用 Flowbite 制作一个模态并使用 Ajax 显示它，因为我想将数据传递到模态主体内部。该模式工作正常，但按下关闭按钮时无法关闭。 这是我的代码：...

从可访问性角度来看，从菜单项打开的模式的最佳实践

在我的应用程序中，我有一个带有子菜单的菜单，并且在该子菜单中有 3 个项目。一旦用户单击其中之一，就会弹出带有保存和取消按钮的模态框。我的问题是……

模态消失后单击按钮

我希望我的测试在模态消失后单击按钮。 所以我写了这个 cypress 脚本： cy.get("闪亮模态").should("not.exist") cy.get("#my_button").click 乙...

如何在缩放或调整屏幕大小时使模态窗口的位置静态

该网站（用 React 编写，使用 Typescript 和 Tailwind）有一个模式窗口。 Modal 是使用“react-modal”库 https://reactcommunity.org/react-modal/ 实现的。 符合标准

处理内部div和外部div上的点击事件处理程序

我有模式窗口：父div（带有深色透明背景的包装）和子div（带有按钮、输入和文本）。两者都是固定定位。 在 JavaScript 中，我编写简单的代码：如果我...

Cypress：在模态消失后单击按钮

我希望模态消失后可以单击一个按钮。 所以我写了一个cypress脚本： cy.get("闪亮模态").should("not.exist) cy.get("#my_button").click 但它不起作用

JS - 通过在模式中单击按钮来增加 JavaScript 中的变量

这是我之前已回答和解决的问题的延续。 我用它来创建我自己的 JS 增量和减量。 错误 未捕获的类型错误：无法读取 null 的属性（

Bootstrap Modal 弹出，但有一个“有色”页面并且无法交互

我正在使用引导程序来设置模式弹出窗口。单击按钮时，模式对话框将打开，但整个页面略有“着色”，并且我无法与模式交互（该页面本质上

在线元素/模态 LIVEWIRE V3 中时，细长选择不起作用

在 livewire 模态（wire-elements/modal）中实现 slim select 时，搜索不起作用，我使用 alpine.js 来初始化组件，它正确加载所有内容，不会丢失.. .

在另一个 div 内引导模态窗口

我的引导模式工作正常。 我的问题是我需要将模态窗口（包括灰色背景）应用到网站的 div 上，而不是应用到正文上。 我有以下的str...

bootstrap 3.3.7 模式不显示 html

我有以下代码，$('.modal).modal('show')似乎将html添加到DOM但没有显示。我注意到不透明度已更改为 0.5 这是代码 我有以下代码， $('.modal).modal('show') 似乎将 html 添加到 DOM 但没有显示。我注意到不透明度已更改为 0.5 这是代码 <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <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 message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> 看起来工作没有问题。您是否记得包含相关的 Bootstrap JS 和 CSS 文件？ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <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 message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <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 message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>