modal-dialog 相关问题

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

我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码：从“vue”导入{ref}； const 对话框模板Re...

javascript html vue.js vuejs3 modal-dialog

回答 1 投票 0

在 Angular 中打开模态时出现ExpressionChangedAfterItHasBeenCheckedError

` `<ngx-datatable-column *ngIf="search_type ==='booking'" [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value"> <span class="fa fa-user-plus font-medium-3 text-primary cursor-pointer pl-1" (click)="onUpdateBookingLinguist(row)"></span> </ng-template> </ngx-datatable-column>` 上面是我的html代码，下面是我的ts代码 ` onUpdateBookingLinguist(linguist: Linguist) { const modalRef = this.modalService.open(ScheduledBookingModalComponent, { size: 'lg' }); modalRef.componentInstance.linguist_other_bookings = linguist['scheduled_booking']; modalRef.result.then((result) => { if (!result) { return; } this.cdr.detectChanges(); }).catch((e) => { }); this.cdr.detectChanges(); }` 我试图从 ngx-datatable-column 打开模式，但收到此错误错误错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。上一个值：“datatable-body-cell sort-active active”。当前值：'datatable-body-cell sort-active'.. 欲了解更多信息，请访问 https://angular.io/errors/NG0100 我尝试使用 ChangeDetectorRef.detectChanges() 手动触发更改检测，但仍然收到错误。当您修改 Angular 在其更改检测周期期间也尝试检查或更新的属性时，通常会出现此错误。因此您可以使用 ChangeDetectorRef 在特定情况下手动触发更改检测。通过从 ChangeDetectorRef 调用 detectorChanges()，您可以手动指示 Angular 对该组件及其子组件重新运行更改检测，从而可能解决问题这是如何在组件中使用ChangeDetectorRef 的示例构造函数（私有 cdr：ChangeDetectorRef）{} ngAfterContentChecked() { this.cdr.detectChanges(); }

angular modal-dialog

回答 1 投票 0

如何在模式中的 onClick 地图中显示数组对象？

我对 React 相当陌生，我正在使用 NextJS。我有一个包含角色对象的数组。我正在映射数组以显示角色名称和描述。我想做的是显示另一个数组 ob...

reactjs arrays next.js modal-dialog map-function

回答 1 投票 0

脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...）尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });

javascript twitter-bootstrap playframework modal-dialog load

回答 3 投票 0

自定义模态/工作表位于反应本机博览会路由器堆栈屏幕的后面，其表示设置为模态

我刚刚学习 React Native，我在上面使用了 Expo。我有屏幕 create.js 将屏幕上的演示选项设置为“模态”，现在在这个屏幕中我必须使用 SELECT 输入...

react-native mobile expo modal-dialog expo-router

回答 1 投票 0

如何防止在android中打开键盘时反应本机模式向上移动？

我有一个非常基本的模态组件（使用React-native-modal），它渲染给定的子视图。但是，我不希望出现类似于 KeyBoardAvoiding 视图的行为，即我不希望模式...

react-native modal-dialog

回答 4 投票 0

Laravel bootstrap 使用模态删除确认

我在将数据传输到删除确认模式时遇到问题。我已经验证我的删除路线可以从数据库中删除数据，但我面临的问题是我无法通过...

php jquery laravel modal-dialog

回答 4 投票 0

我在foreach中有模式对话框，想在提交按钮后显示div动画

我将其放在表格单元格中并将 #key 传递到模式对话框我将其放在表格单元格中并将 #key 传递到模式对话框 <td> <a id="myButton" href="#!" data-toggle="modal" data-target="#restoreBackup_{{ $key }}" class="btn btn-warning">Restore Backups</a> </td> 当我单击“恢复”按钮时，会出现在 foreach 中打开一个表单的模式对话框我的模式： @foreach ($backups as $key => $backup) {{-- //restore section--}} <div class="modal fade" id="restoreBackup_{{ $key }}" tabindex="-1" role="dialog" aria-labelledby="restoreBackup_{{ $key }}" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">{{ translate('Confirm Restore') }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-warning" role="alert"> <b>Do you really want to restore this backup? {{ $key }}</b> </div> <form id="frm_restore_{{ $key }}" action="{{ route('backups.restore') }}" method="POST"> @csrf <input type="hidden" name="key" value="{{ $key }}" /> <input type="hidden" name="backuptype" value="{{ $backup['type'] }}" /> <div class="modal-body"> @if ($backup['type'] == 0) <div class="form-group"> <h5 class="modal-title">Choose Your Restore Type</h5> </div> <div class="radio-button"> <input type="radio" id="radio30" name="restoretype" value="0" checked> <label for="radio30">DataBase And Folder</label> <input type="radio" id="radio31" name="restoretype" value="1"> <label for="radio31">Only DataBase</label> <input type="radio" id="radio32" name="restoretype" value="2"> <label for="radio32">Only Folder</label> </div> @endif <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-warning">Restore</button> </div> </div> </form> <div id="animationdiv_{{ $key }}"></div> </div> </div> </div> @endforeach 如你所见，我有一个像这样的div： <div id="animationdiv_{{ $key }}"></div> 我有一个定义动画的CSS代码： .currently-loading { opacity: 0.75; -moz-opacity: 0.75; filter: alpha(opacity=75); background-image: url({{ static_asset('backup_restore_loading.gif') }}); background-repeat: no-repeat; position: absolute; height: 100%; width: 100%; z-index: 10; background-size: contain; } 如果我在 foreach 循环之外打开一个对话框模式，例如它的表单名称是 frm_backup，那么如果我使用以下代码提交它，我可以在 JavaScript 部分中显示动画： var frm_backup = document.getElementById('frm_backup'); frm_backup.addEventListener('submit', bmdLoading1); //display loading message function bmdLoading1() { var divloading1 = ''; divloading1 = '<div class="currently-loading"></div>' $("#animation").html(divloading1); } 但是如果我在 foreach 循环中打开一个对话框模式，我不知道如何传递 $key 并使用 $key 显示 div 动画在这种情况下，每个模态都有一个类似 id="frm_restore_{{ $key }}" 的名称，每个 div 都有一个类似 id="animationdiv_{{ $key }}" 的名称这取决于您要向哪个元素添加动画“div”。但你必须编辑他的html。您正在使用要显示的 div 创建一个变量，但没有将其分配给代码中的任何位置。类似的东西 $('#modal-body').html(divloading1);

javascript php laravel modal-dialog laravel-blade

回答 1 投票 0

如何在尝试访问下一个js中的受保护路由时打开登录模式？

在我的网站中，我在模式中使用登录表单而不是登录页面。我的问题是，如果用户尝试访问受保护的路由，甚至尝试执行一些需要的操作，如何打开此登录模式...

reactjs next.js modal-dialog

回答 1 投票 0

单击时状态不会改变

这是我的组件代码：从“反应”导入反应；从“反应”导入{useState}；从“../lib/styles”导入{ Text, SvgContainer, Svg, Flex }；从 & 导入模态框

javascript reactjs modal-dialog

回答 1 投票 0

如何在父对话之外但又超出其边界的情况下打开子对话？

我正在构建一个asp.net项目，其中我需要打开一些弹出对话框来与用户交互。然而，我现在陷入了一个需要从另一个对话中打开对话的地方......