modal-dialog 相关问题

我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 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

javascript angular dialog modal-dialog angular-reactive-forms

回答 1 投票 0

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

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

angular modal-dialog ng-zorro-antd

回答 2 投票 0

引导模式 - 屏幕变黑

我有两个模态框，它们在单击按钮时弹出。一个工作正常，但对于第二个，屏幕只是变黑，没有任何反应：一、工作模式：我有两个模式，它们在单击按钮时弹出。一个工作正常，但是对于第二个，屏幕只是变黑，没有任何反应：一、工作模式： <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 内的引导模型，尝试将主体的末端放置:)

javascript jquery twitter-bootstrap modal-dialog

回答 6 投票 0

显示对话框但没有 ModalBarrier

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

flutter modal-dialog

回答 1 投票 0

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

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

javascript reactjs typescript modal-dialog renderer

回答 1 投票 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

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

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

ajax laravel modal-dialog

回答 1 投票 0

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

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

menu modal-dialog accessibility

回答 1 投票 0

模态消失后单击按钮

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