modal-dialog 相关问题

指用于向用户显示重要信息的图形对话框。这些对话框显示在所有其他内容之上，阻止应用程序流，直到收到用户输入。

有三个模态关闭自身然后从模态内部打开另一个模态这是离子模态的结构有三个模态关闭自身，然后从模态内部打开另一个模态这是离子模态的结构 <ion-modal id="last-modal" #modal_s [backdropDismiss]="false"> <ng-template> <div class="wrapper"> <ion-item lines="none" class="offer-item ion-no-padding"> <ion-col> <ion-label class="offer-title">{{offer.title[lg]}}</ion-label> </ion-col> <ion-icon (click)="closelastModal('last-modal');" style="color: var(--ion-color-modal-exp)" size="small" name="close-outline" ></ion-icon> </ion-item> <div style=" display: flex; background-color: var(--ion-color-modal-img-background); border-radius: 16px; margin-left: 12px; margin-right: 12px; align-items: center; justify-content: center; padding: 24px; " > <ion-img [src]="offer.img == null || offer.img.length === 0 ? 'assets/images/cofee_cup.png' : offer.img" alt="Coffee Cup" class="custom-card-img" /> </div> <p style=" margin-left: 12px; margin-right: 12px; margin-top: 8px; color: var(--ion-color-modal-description); " > {{offer.text[lg]}} </p> <p class="exp-date"> {{ "OFFERS.EXPIRY" | translate }} {{offer.expirationDate | date : "MMM dd, HH:mm"}} </p> <ion-button expand="block" class="custom-button" (click)="closelastModal('last-modal');modalService.openOfferActionModal($event, offer, 'store')" >  {{ "OFFERS.REDEEM" | translate }} <ion-icon name="chevron-forward-outline" slot="end"></ion-icon> </ion-button> </div> </ng-template> </ion-modal> and then openAnotherModal(nextModalId: string) { const modalElement = document.getElementById(nextModalId); modalElement?.setAttribute('is-open', 'true'); // Open the next modal } closeAnotherModal(modalId: string) { const modalElement = document.getElementById(modalId); modalElement?.setAttribute('is-open', 'false'); // Close the modal } 这里是三个模态从模态本身的按钮依次打开，现在我想使用关闭按钮关闭自身模态，然后使用另一个按钮关闭自身模态并打开下一个模态。我的问题是，通过在同时调用时使用此系统关闭和打开功能，那么它会起作用，但对于关闭按钮功能不起作用，但如果我使用 modal_s.dismiss() 它会起作用，但如果一旦调用此功能，那么下一个 openModal 将不起作用应该是解决方案，在离子平台中非常新，请帮助要实现一个模式自行关闭然后打开另一个模式的系统，同时确保模式关闭和重新打开的正确行为，请按照以下步骤操作：问题分解 Ionic 模态行为：使用 modal.dismiss() 时，模态将被销毁，除非重新创建，否则无法重新打开。同时关闭和打开：顺序可能处理不当，导致模态生命周期事件发生冲突。建议的解决方案：有效使用 Ionic Modal Controller 的 API 来管理模态生命周期。避免直接操作 DOM 元素，例如 setAttribute。模板代码 <ion-modal id="last-modal" [is-open]="isLastModalOpen" [backdropDismiss]="false"> <ng-template> <div class="wrapper"> <ion-item lines="none" class="offer-item ion-no-padding"> <ion-col> <ion-label class="offer-title">{{ offer.title[lg] }}</ion-label> </ion-col> <ion-icon (click)="closeModal('last-modal')" style="color: var(--ion-color-modal-exp)" size="small" name="close-outline" ></ion-icon> </ion-item> <div style=" display: flex; background-color: var(--ion-color-modal-img-background); border-radius: 16px; margin-left: 12px; margin-right: 12px; align-items: center; justify-content: center; padding: 24px; " > <ion-img [src]="offer.img == null || offer.img.length === 0 ? 'assets/images/cofee_cup.png' : offer.img" alt="Coffee Cup" class="custom-card-img" /> </div> <p style=" margin-left: 12px; margin-right: 12px; margin-top: 8px; color: var(--ion-color-modal-description); " > {{ offer.text[lg] }} </p> <p class="exp-date"> {{ "OFFERS.EXPIRY" | translate }} {{ offer.expirationDate | date: "MMM dd, HH:mm" }} </p> <ion-button expand="block" class="custom-button" (click)="closeAndOpenNextModal('last-modal', 'next-modal-id')" > {{ "OFFERS.REDEEM" | translate }} <ion-icon name="chevron-forward-outline" slot="end"></ion-icon> </ion-button> </div> </ng-template> </ion-modal> 组件逻辑 import { Component } from '@angular/core'; import { ModalController } from '@ionic/angular'; @Component({ selector: 'app-modal-example', templateUrl: './modal-example.component.html', styleUrls: ['./modal-example.component.scss'], }) export class ModalExampleComponent { isLastModalOpen = false; constructor(private modalController: ModalController) {} // Open a modal async openModal(modalId: string) { const modalElement = document.getElementById(modalId); if (modalElement) { this.isLastModalOpen = true; // Update state } } // Close the current modal async closeModal(modalId: string) { const modalElement = await this.modalController.getTop(); if (modalElement) { await modalElement.dismiss(); this.isLastModalOpen = false; // Update state } } // Close the current modal and open another async closeAndOpenNextModal(currentModalId: string, nextModalId: string) { await this.closeModal(currentModalId); // Close the current modal this.openModal(nextModalId); // Open the next modal } } 解释： [is-open] 属性绑定：使用 Angular 的属性绑定来切换模式可见性，而不是操作 DOM 属性。 Modal Dismissal：使用 Ionic 的 ModalController 的 dimiss 方法来确保正确管理模态生命周期。顺序关闭和打开：在打开下一个模式之前确保当前模式完全关闭（await）以避免生命周期冲突。

android angular ionic-framework modal-dialog

回答 1 投票 0

从模式对话框中的字段更新工作表

我正在尝试使用其中包含三个字段的模式对话框来更新 Google 表格。要更新的单元格与活动单元格的位置相关。第一个字段（会话）处于活动状态...

google-sheets modal-dialog

回答 1 投票 0

如何在网站中创建弹出对话框

我想在打开网站时创建一个弹出对话框给我创建响应式弹出对话框的代码，该对话框响应灵敏且无错误，我们必须全部显示...

responsive-design modal-dialog popup bootstrap-5 mobile-website

回答 1 投票 0

ionic 在模态中添加框阴影不起作用

我正在尝试为模型弹出窗口添加阴影以赋予其一定的尺寸。但这并不适用。这是代码 const modal = 等待 this.modalCtl.create({ 组件：ExplainNetworthCompone...

ionic-framework modal-dialog

回答 1 投票 0

离子控制控制器模态高度

我正在使用像这样启动的控制器弹出窗口异步 openNwInsights(){ const modal = 等待 this.modalCtl.create({ 组件：ExplainNetworthComponent }) 模态.present(); ...

css angular ionic-framework sass modal-dialog

回答 1 投票 0

从其成员变量访问 CMFCButton

我有一个工作模式 MFC 对话框，有时会创建一个模式子对话框 DJMB_Dlg。子对话框窗口是使用 VS 2022 中的对话框编辑器创建的。子对话框窗口有一个

visual-c++ mfc modal-dialog

回答 1 投票 0

Swal 行为不当

每当我单击 swal 内的“确定”按钮时，后面的主网页就会变得无响应。点我函数 myFunction(){ 斯瓦尔...

modal-dialog alert sweetalert

回答 1 投票 0

Bootstrap 模式中的表单

我有一个进行产品注册的模式。我想在模式内提交表单而不离开模式。我有一个用于注册产品的modal。我想在模式内提交表单而不离开模式。  <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <form method="post"> <button type="submit">Submit</button> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> 就我而言，我只将提交按钮放在页脚正文中并删除数据关闭 IE： <div class="modal-content"> <form id="role-form" method="get"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">تعديل صلاحيات المدير - {{$user->username}}</h4> </div> <div class="modal-body"> <div class="form-group col-md-12"> <select id="role" name="role" class="form-control"> <option selected disabled>الصلاحية</option> <option value='1'>مدير</option> <option value='2'>مشرف</option> </select> </div> <div class="clearfix"></div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success" >حفظ</button> <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button> </div> </form> </div> 首先，在您的 <form> 标签上设置一个 id： <form id="myForm" method="post"> ... </form> 如果您使用 jQuery（强烈推荐），您可以这样做： $(function(){ $('#myForm').on('submit', function(e){ e.preventDefault(); $.post('http://www.somewhere.com/path/to/post', $('#myForm').serialize(), function(data, status, xhr){ // do something here with response; }); }); }); 你也可以这样做：向表单添加 Id <form method="post" id="myForm"> <button type="submit">Submit</button> </form> 在按钮中添加表单引用 <button type="submit" form="myForm" class="btn btn-primary">Save changes</button>

twitter-bootstrap submit modal-dialog

回答 3 投票 0

修改Bootstrap 5模型内容，关闭并重新打开

我有一个使用 Bootstrap 5 框架的模式。我将其中包含的表单发布到 JQuery ajax 调用，然后根据 JQuery AJax 调用的结果修改模式内容，然后...

jquery twitter-bootstrap modal-dialog

回答 1 投票 0

动态更改图像源内部模式

我正在尝试更改图像 HTML 元素的源图像。我如何获取 this.id 非常复杂，并且超出了这个问题的上下文......

javascript html image modal-dialog on-the-fly

回答 3 投票 0

模态固定位置内容移位

经过大量研究，我无法找到打开模态窗口时固定定位元素、封面图像和标准内容向右移动的正确解决方案。注：我是