modal-dialog 相关问题

使用 php javascript 将 pdf 打开为模式

我正在尝试使用 laravel 11 和 vue js 3 将 PDF 文件打开到模式中。 为此，我在控制器中构建了一个包含以下内容的函数： 公共函数 getPdfPath(请求 $request) { $

将参数传递给模态弹出窗口

我想知道是否可以将按钮的 id 和 class 作为参数传递给模态，以便我可以在模态页面中显示动态数据。 导航栏.剃刀： 我想知道是否可以将按钮的 id 和 class 作为参数传递给模态，以便我可以在模态页面中显示动态数据。 导航栏.剃刀： <li><button class ="firstButtonDialog" id="mm" @onclick="() => _modal.Open()">mm</button></li> <li><button class ="secondButtonDialog" id="cm" @onclick="() => _modal.Open()">cm</button</li> <li><button class ="thirdButtonDialog" id="meter" @onclick="() =>_modal.Open()">meter</button></li>meter</button></li> private Modal _modal { get; set; } public string _min { get; set; } public string _max { get; set; } private void OnModalMin(string min) { _min = min; } private void OnModalMax(string max) { _max = max; } 模态页面中的“标题”和“测量”需要是动态的。我想在这里使用传递的参数来显示动态数据。 莫代尔剃须刀： <h5 class="modal-title">firstButtonDialog</h5> //title need to be dynamic based on button clicked <div class="modal-body"> <label for="Min">Enter Min</label> <input @bind="min" type="text" id="Min" name="Min">[mm]<br> // [mm] measurement need to be dynamic based on button clicked <label for="Max">Enter Max:</label> <input @bind="max" type="text" id="Max" name="Max">[mm]<br> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" @onclick="() => Done()">Done</button> </div> @code { private string min; private string max; public Guid Guid = Guid.NewGuid(); public string ModalDisplay = "none;"; public string ModalClass = ""; [Parameter] public EventCallback<string> OnDoneCallback1 { get; set; } [Parameter] public EventCallback<string> OnDoneCallback2 { get; set; } public void Open() { ModalDisplay = "block;"; ModalClass = "Show"; ShowBackdrop = true; StateHasChanged(); } public void Close() { ModalDisplay = "none"; ModalClass = ""; ShowBackdrop = false; StateHasChanged(); } public async Task Done() { await InvokeAsync(() => OnDoneCallback1.InvokeAsync(min)); await InvokeAsync(() => OnDoneCallback2.InvokeAsync(max)); } } 这个问题有一个简单的答案，或者一个更长更全面的答案，演示如何构建一个“基本”模态对话框框架。这是后者。 您需要将 Modal Dialog 与 EditForm 分开。您应该能够在模态对话框中托管任何表单。 首先，定义一个 IModalDialog 接口，这样我们就可以拥有多个模态对话框的实现 - 比如一个简单的干净的 Css 或 Bootstrap 。 public interface IModalDialog { public ModalRequest ModalRequest { get; } public bool IsActive { get; } public bool Display { get; } public Task<ModalResult> ShowAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent; public Task<bool> SwitchAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent; public void Update(ModalRequest? modalRequest); public void Dismiss(); public void Close(ModalResult result); } 我们传入一个ModalRequest： public record ModalRequest { public IDictionary<string, object> Parameters { get; init; } = new Dictionary<string, object>(); public object? InData { get; init; } = null; } 然后回来ModalResult public class ModalResult { public ModalResultType ResultType { get; private set; } = ModalResultType.NoSet; public object? Data { get; set; } = null; public static ModalResult OK() => new ModalResult() { ResultType = ModalResultType.OK }; public static ModalResult Exit() => new ModalResult() { ResultType = ModalResultType.Exit }; public static ModalResult Cancel() => new ModalResult() { ResultType = ModalResultType.Cancel }; public static ModalResult OK(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.OK }; public static ModalResult Exit(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.Exit }; public static ModalResult Cancel(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.Cancel }; public enum ModalResultType { NoSet, OK, Cancel, Exit } } 我们的基本实现 - ModalDialog.razor。它使用 TaskCompletionSource 在 async 上下文中运行。您可以通过调用 ShowAsync<TModal> 将 TModal 设置为要在表单中托管的组件并通过 ModalRequest 实例提供设置和数据来打开对话框。然后，您等待退出表单时设置为完成的提供 Task。我们使用 DynamicComponent 来创建 TModal。请注意，我们将 Modal 实例级联到托管组件。 @implements IModalDialog @if (this.Display) { <CascadingValue Value="(IModalDialog)this"> <div class="base-modal-background" @onclick="OnBackClick"> <div class="base-modal-content" @onclick:stopPropagation="true"> <DynamicComponent Type=this.ModalContentType Parameters=this.ModalRequest.Parameters /> </div> </div> </CascadingValue> } @code { [Parameter] public bool ExitOnBackGroundClick { get; set; } = false; public ModalRequest ModalRequest { get; private set; } = new ModalRequest(); public object? InData { get; } = null; public bool Display { get; protected set; } = false; protected TaskCompletionSource<ModalResult> _ModalTask { get; set; } = new TaskCompletionSource<ModalResult>(); protected Type? ModalContentType = null; public bool IsActive => this.ModalContentType is not null; public Task<ModalResult> ShowAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent { this.ModalRequest = modalRequest; this.ModalContentType = typeof(TModal); this._ModalTask = new TaskCompletionSource<ModalResult>(); this.Display = true; InvokeAsync(StateHasChanged); return this._ModalTask.Task; } public async Task<bool> SwitchAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent { this.ModalRequest = modalRequest; this.ModalContentType = typeof(TModal); await InvokeAsync(StateHasChanged); return true; } public void Update(ModalRequest? modalRequest = null) { this.ModalRequest = modalRequest ?? this.ModalRequest; InvokeAsync(StateHasChanged); } private void OnBackClick(MouseEventArgs e) { if (ExitOnBackGroundClick) this.Close(ModalResult.Exit()); } public async void Dismiss() => await this.Reset(ModalResult.Cancel()); public async void Close(ModalResult result) => await this.Reset(result); private async Task Reset(ModalResult result) { _ = this._ModalTask.TrySetResult(ModalResult.Cancel()); this.Display = false; this.ModalContentType = null; await InvokeAsync(StateHasChanged); } } 它是组件 css - ModalDialog.razor.css div.base-modal-background { display: block; position: fixed; z-index: 101; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } div.base-modal-content { background-color: #fefefe; margin: 10% auto; padding: 10px; border: 2px solid #888; width: 90%; } 您的数据类别： public class MyData { public int Min { get; set; } public int Max { get; set; } } 和表单 - MyForm.razor。这将捕获级联 IModalDialog 并与 IModalDialog 交互以获取任何提供的数据并关闭对话框。 <div class="modal-title border-bottom border-secondary"> <h5>@this.Title</h5> </div> <div class="modal-body"> <label class="form-label" for="Min">Enter Min [mm]</label> <input class="form-control" @bind=model.Min type="number"> <label class="form-label" for="Max">Enter Max [mm]:</label> <input class="form-control" @bind=model.Max type="number"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" @onclick="() => Done()">Done</button> </div> @code { private MyData model = new MyData(); [Parameter] public string Title { get; set; } = "I Need a Title!"; [CascadingParameter] private IModalDialog? modalDialog { get; set; } private ModalRequest modalRequest => modalDialog?.ModalRequest ?? new ModalRequest(); protected override void OnInitialized() { if (modalDialog is null) throw new NullReferenceException("You must cascade a IModalDialog to use this Form"); model = (MyData)(modalDialog?.ModalRequest.InData ?? new MyData()); } private void Done() => modalDialog?.Close(ModalResult.OK(model)); } 最后是演示页面。它托管 ModalDialog 组件并与其交互以打开对话框。 @page "/" <PageTitle>Modal Dialog Demo</PageTitle> <div class="m-2 b-2"> <button class="btn btn-primary" @onclick=OpenDialog1>Edit Model 1</button> </div> <div class="alert alert-primary"> <strong>Model 1</strong> Min: @this.model1.Min Max: @this.model1.Max </div> <div class="m-2 b-2"> <button class="btn btn-dark" @onclick=OpenDialog2>Edit Model 2</button> </div> <div class="alert alert-dark"> <strong>Model 2</strong> Min: @this.model2.Min Max: @this.model2.Max </div> <ModalDialog @ref=modalDialog ExitOnBackGroundClick=false /> @code { private MyData model1 = new MyData { Max = 20, Min = -10 }; private MyData model2 = new MyData { Max = 50, Min = -50 }; private IModalDialog? modalDialog; private async Task OpenDialog1() { var parameters = new Dictionary<string, object> { { "Title", "Modal Form 1" } }; var request = new ModalRequest { InData = this.model1, Parameters = parameters }; if (this.modalDialog is not null) await modalDialog.ShowAsync<MyForm>(request); // This won't complete until the dialog closes and the Task is complete. // We can use any return data at this point // and this component will render as part of the ComponentBase UI event handling code. } private async Task OpenDialog2() { var parameters = new Dictionary<string, object> { { "Title", "Modal Form 2" } }; var request = new ModalRequest { InData = this.model2 }; if (this.modalDialog is not null) await modalDialog.ShowAsync<MyForm>(request); } } 这是其中一个对话框的屏幕截图： 代码暂时放在这里 - https://github.com/ShaunCurtis/SO73617831 我知道这已经有几年了，但我喜欢你在这里所做的概念。我在使用示例时注意到的一件事是 InData 被修改，这在某些情况下可能不是所需的结果。我知道这可以在派生对话框中处理。我还注意到上面示例中的 Reset(ModelResult result) 始终返回 ModalResult.Cancel。那应该是结果参数吗？由于您的临时存储库已消失，我看不到您是否进行了其他更改。

如何从表单获取数据到插件中？

我正在开发一个插件，它有一个模态引导程序的形式，供用户输入数据。 当我点击保存时，它返回到同一页面，我需要获取信息。它看起来像... ... 我正在开发一个插件，它有一个模态引导程序的形式，供用户输入数据。 当我点击保存时，它返回到同一页面，我需要获取信息。看起来像... <form> <input class="form-control" type="any" id="compraTC" style="margin-left:5px" placeholder="0.0000" required> <button type="submit" class="btn btn-primary" id="btnGuardarTC">Guardar Cambios</button> </form> if(isset($_POST['btnGuardarTC'])) { echo $_POST['compraTC']; } else echo "no hay retorno"; 我无法获取新值。你能帮我一下吗？ 您好！ 解决方案！我需要开发更多插件！ 您需要在 <form> 标签中包含更多信息。看起来您正在 PHP 中使用 POST，因此您需要在 HTML 中指定它，以及 Web 服务器上 PHP 文件的路径。 <form method="POST" action="./path/to/php/file.php"> <input class="form-control" type="any" id="compraTC" style="margin-left:5px" placeholder="0.0000" required> <button type="submit" class="btn btn-primary" id="btnGuardarTC">Guardar Cambios</button> </form> 我建议进一步研究这一点，因为这些信息应该可以通过 HTML 和 PHP 的在线教程轻松访问。 有关 HTML 中 <form> 标签的更多信息，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form。

如何在 Bootstrap v5 中使用 javascript 编辑模态 data-bs-keyboard 属性？

我正在尝试拥有一种设置面板，可以启用/禁用模式的 data-bs-keyboard 属性，允许或禁止它们使用转义键关闭。 到目前为止唯一的代码...

如何检测模态<dialog>是否打开？

我有一个包含多个 元素的页面，我使用其 showModal() 方法将其作为模式打开。 我想检测当前是否从 Javascript 打开了其中任何一个（因为某些事件

R 在菜单项单击上打开模式，但仅一次

我想通过单击 menuItem 选项卡来打开 modalDialog 窗口。在这里提出并回答了类似的问题，我将其用作模板： 在菜单项上单击打开模式 与我的不同

CDK 拖放预览位于模式对话框后面

在查看了许多堆栈溢出答案后，我发布了这个问题。我需要在对话框模式上启用拖放功能。我在表行上使用它。我可以拖放...

Koltin Jetpack compose，ModalBottomSheetLayout 停在屏幕中间

我是jetpack compose的新手，我真的很喜欢它。但遇到了一个问题：我有一个模式可以容纳我所有的屏幕尺寸，按照倍数教程我可以使用 ModalBottomSheetLa 来做到这一点...

MUI 基础模态背景未注册点击

我尝试使用 MUI Base Modal 组件和 scss 模块来实现模态样式： 从 '@mui/base' 导入 { Modal as BaseModal, ModalProps as BaseModalProps }; const 背景 = () =&g...

如何修复在 Android 移动设备上显示的 React Native Modal 中缺失的底部部分？

在React Native中，我在Modal中有一个图像。 但是，当首次显示 Modal 时，它会遇到底部缺失的错误。 Modal首次显示时出现此错误 当我尝试做的时候

在 ng-template 到 ng-content 之间传递数据（Angular 17）

如何将lists$从list.component传递到ng-template 我提供的代码您可以看到函数调用的管道以及 ng-template 如何传递到 modal.compoent.html。 ................................

如何将模态对话框返回的字符串处理成对象

我需要处理长度超过 50,000 个字符的 JSON 文件。为此，我想使用模式对话框文本区域。 我有一个带有两个文本区域的对话框。第一个是原始 json 文件 t...

Bootstrap Modal header css 变量未定义 - var(--bs-modal-header-padding) 未定义

我没有在模态中使用模态标题 我想在普通 div 内使用 modal-header css 属性 但是 css 属性在其内部模态时具有值，但在...中使用时显示变量未定义

对话框中的 WINAPI Esc 键处理

互联网上已经写了很多关于人们对对话框中默认 ESC 键处理感到恼火的帖子，但这正是我真正期望但无法实现的。 简而言之，我的对话定义...

从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 内的引导模型，尝试将主体的末端放置:)