modal-dialog 相关问题

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

触发特定模态内容

我有切换模式的工作代码，但我希望能够通过页面上的不同触发器切换不同的模式内容。我知道我需要在其中使用 ids，但我不是 100% 确定如何使用

javascript html css modal-dialog simplemodal

回答 2 投票 0

在模态上按 Escape 键会触发父组件上的 escape 事件

这是主页。 “使用客户端”；从“react”导入 React, { useEffect, useState }; 从“./TestModal”导入TestModal；常量应用程序 = () => { const [isOpen,

javascript reactjs events modal-dialog keyboard-events

回答 1 投票 0

React 闭包中过时的 useState 值 - 如何修复？

我想在模态关闭时使用状态变量（值）。但是，在模式打开时对状态变量所做的任何更改都不会在处理程序中观察到。我不明白为什么会这样...

reactjs react-hooks modal-dialog closures stale

回答 5 投票 0

如何在每个 Ant Design 模态上拥有相同的透明蒙版？

{filteredBookings.map((预订, 索引) => ( {filteredBookings.map((booking, index) => ( <Modal key={index} // Make sure to provide a unique key open={detailModalVisible} onCancel={(e) => { setDetailModalVisible(false); setCurrentBookingIndex(null); }} footer={null}> <EachBooking key={currentBookingIndex} // Ensure EachBooking components have unique keys selectedBooking={selectedBooking} roomId={selectedRoomId} roomName={selectedRoomName} username={username} toPreviousMainModal={toPreviousMainModal} /> </Modal> ))} 我在 <EachBooking /> 中有子模态，单击主模态时将打开。当我检查 antd 自定义类 antd-modal-mask 时，它有 rgba(0, 0, 0, 0.45) 这是它们的默认值。但我在子模态中没有看到该属性，并且蒙版看起来更暗，就像它加倍或重叠 0.45 一样。我希望每个模态都有相同的 alpha 0.45 蒙版。我怎样才能做到这一点？因为您正在映射模态。这将导致出现多个模态，这些模态将相互叠加。删除映射即可工作。

reactjs modal-dialog antd

回答 1 投票 0

官方示例 Svelte 模式组件未从 SvelteKit 项目中的父组件关闭

我已从 https://svelte.dev/examples/modal 给出的官方示例将 Modal 添加到我的 Sveltekit 应用程序中我的 Modal.svelte 是导出让showModal； // 布尔值让迪亚洛...</desc> <question vote="-1"> <p>我已将 Modal 添加到我的 <a href="https://kit.svelte.dev/" rel="nofollow noreferrer">Sveltekit</a> 应用程序（来自 <a href="https://svelte.dev/examples/modal" rel="nofollow noreferrer">https://svelte.dev/examples/modal</a></p> 给出的官方示例） <p>我的<pre><code>Modal.svelte</code></pre>是</p> <pre><code><script> export let showModal; // boolean let dialog; // HTMLDialogElement $: if (dialog && showModal) dialog.showModal(); </script>  <dialog bind:this={dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()} >  <div on:click|stopPropagation> <button style="float: right; font-weight: bold;" autofocus on:click={() => dialog.close()}>&times;</button> <slot name="header" /> <slot /> </div> </dialog> <style> dialog { max-width: 32em; border-radius: 0.2em; border: none; padding: 0; } dialog::backdrop { background: rgba(0, 0, 0, 0.3); } dialog > div { padding: 1em; } dialog[open] { animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes zoom { from { transform: scale(0.95); } to { transform: scale(1); } } dialog[open]::backdrop { animation: fade 0.2s ease-out; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } button { display: block; } </style> </code></pre> <p>我的<pre><code>App.svelte</code></pre>是</p> <pre><code><script> // @ts-nocheck import Modal from './Modal.svelte'; let cancelRequestId; let showModal = false; function cancleRequest(id) { showModal = true; cancelRequestId = id; } async function processCancleRequest() { showModal = false } </script> <div> <Modal bind:showModal> <h1 slot="header" style="font-weight: bold;">Request Confirmation</h1> <hr /> <p>Are you sure want to proccess request?</p> <br /> <div style="display: flex; justify-content: space-between;"> <button>No</button> <button on:click={processCancleRequest}>Yes</button> </div> </Modal> </div> <button on:click={() => cancleRequest(item.id)}></button> </code></pre> <p>单击 <pre><code>Yes</code></pre> 按钮时，我正在设置 <pre><code>showModal = false</code></pre>，但模态仍然没有关闭。</p> <p>我缺少什么才能让它发挥作用？</p> </question> <answer tick="false" vote="0"> <p>这<em>不是</em>“官方组件”，它只是一个准系统示例。<br/> （一般没有官方组件。）</p> <p>那里没有关闭模式的代码，只是打开。<br/> 您可以在组件中执行类似的操作：</p> <pre><code>$: if (dialog) { showModal ? dialog.showModal() : dialog.close(); } </code></pre> </answer> </body></html>

javascript html modal-dialog svelte sveltekit

回答 0 投票 0

官方 Svelte 模式组件未从 SvelteKit 项目中的父组件关闭

javascript html modal-dialog svelte sveltekit

回答 0 投票 0

Modal 与 React JS 最佳实践

我想制作一个模态窗口，用户可以在其中选择 3 个角色的团队。到目前为止，我一直在父组件中使用状态，例如 const [showModal,toggleModal] = useState(false); 但是

javascript reactjs modal-dialog

回答 1 投票 0

显示模式对话框（messageBox）会冻结应用程序中的其他窗口

我有一个应用程序，显示托管在同一消息循环线程中的多个不同的顶级窗口。其存在是为了允许用户打开相同数据的不同视图。（在 MS 输出中...

c# winforms modal-dialog

回答 2 投票 0

Unisharp 文件管理器 iframe 引导模式问题

我已经使用 iframe 在引导模式中配置了 unisharp 文件管理器。现在我的问题是，每当我选择图像并单击确认按钮时，所选图像路径都不会插入到

javascript laravel iframe modal-dialog coder

回答 1 投票 0

Javascript 模式框永久显示在页面上，但我的其他两个模式没有

我有 3 个模式框，单击“了解更多”按钮后会打开。问题是第三个在页面加载时打开，无法使用“X”关闭。在我集中注意力之前它运行得很好...

javascript html modal-dialog

回答 1 投票 0

showModalDialog 很慢

当前在 Google 文档插件中调用 showModalDialog() 将需要 3 秒才能显示模式弹出窗口。有时它要长得多：6 秒。这是最低要求：将出现一个空白弹出窗口 - 至少...

google-sheets google-apps-script web-applications modal-dialog add-on

回答 1 投票 0

在我刷新页面之前，表格数据不会更新

我遇到的问题是，当我通过模态组件向数据库添加数据时，新数据不会立即出现在表中。它只有在我刷新页面后才会显示。我参加...

javascript reactjs modal-dialog tailwind-css

回答 1 投票 0

即使我打开模态，视频也不会停止

我有一个视频标签，我在其中播放一些视频并将该视频作为道具传递给我的模态。当我打开模式时，视频仍在后台播放。我希望它在我打开时停止...

javascript html reactjs modal-dialog tailwind-css

回答 1 投票 0

如果没有 JavaSctipt 方法 showModal()，HTML 对话框元素是否可以作为模式打开？

似乎很奇怪，您可以使用 HTML 打开对话框，相当于 JavaScript 方法 show()，但没有相当于 JavaScript 方法 showModal()。我是不是错过了什么？或者是这样...

javascript html dialog modal-dialog

回答 1 投票 0

即使我打开模态视频也不会停止

我有一个视频标签，我正在其中播放某种视频，并将该视频作为道具传递给我的模态，Byt当我打开模态时，视频仍在后台播放，我希望它停止，因为.. .

javascript html reactjs modal-dialog tailwind-css

回答 1 投票 0

Discord.py 模态表单命令没有响应，尽管控制台中没有错误

我想创建一个命令，当我使用它时，会弹出一个表格供我填写，我的回复将通过DM发送给我，然后发布在另一个频道中。下面是我使用的代码（我重新...

python discord discord.py modal-dialog

回答 1 投票 0

如何解决 Edge 中的 -ms-high-contrast 弃用消息？

我有一个简单的确认Mat对话框。该组件的 html 是： {{数据.标题}} {{数据.消息}} 我得到了一个简单的确认MatDialogbox。该组件的 html 是： <h2 mat-dialog-title>{{data.title}}</h2> <mat-dialog-content> <p>{{data.message}}</p> </mat-dialog-content> <mat-dialog-actions [align]="'end'"> <button mat-raised-button cdkFocusInitial mat-dialog-close [mat-dialog-close]="false"> {{data.cancelCaption}} </button> <button mat-raised-button color="primary" [mat-dialog-close]="true"> {{data.confirmCaption}} </button> </mat-dialog-actions> 通过服务调用： confirmDialog(data: ConfirmDialogData): Observable<boolean> { return this.dialog .open(ConfirmDialogComponent, { data, width: '490px', disableClose: true, }) .afterClosed(); } 功能按预期工作。 Chrome 的控制台不显示此消息。然而边缘的控制台说： [Deprecation] -ms-high-constrast is in the process of being deprecated. Please see <URL> for tips on updating to the new Forced Colors Mode standard. 我没有添加任何自定义 CSS。因此，无论使用什么类，都是开箱即用的角材料。我需要在代码中做什么才能不收到此弃用消息？看起来它已集成在组件中，因此您无法更改它。最近，弃用已被推进，警告消息也已被推进。 Angular 团队现在可能一直在努力弃用它，因此您可以预期在未来版本中不会看到弃用警告。当然，您可以在 https://github.com/angular/angular/issues 向他们提交反馈，让他们了解更改。

angular-material modal-dialog microsoft-edge angular17

回答 1 投票 0

我想使用复选框启动模式

一旦复选框的值更改为 True，我想启动一个模式，我已经尝试为此创建函数，但是一旦我选中该复选框，它就不会显示任何内容。我不断改变并且

google-sheets google-apps-script modal-dialog

回答 1 投票 0

引导模式事件未触发

我想在我的模式被关闭后简单地做一些逻辑。在模式中我有一个按钮：保存查... 我想在我的模式被关闭后简单地做一些逻辑。在模式中我有一个按钮： <button type="button" class="btn btn-primary" onclick="$('#mymodal').modal('hide');">Save changes</button> 在视图中，我正在等待事件被触发，但它永远不会被触发。 $('#mymodal').on('hide.bs.modal', function (e) { alert('event fired') }); 我尝试在 chrome 开发工具中放置断点，该事件仅在第一次加载视图时触发。此后，再也不会到达断点。我是不是做错了什么？顺便说一句，模态正在按照我想要的方式隐藏。在你看来，你需要添加 dom 就绪函数并在其中编写代码， $(function(){ // let all dom elements are loaded $('#mymodal').on('hide.bs.modal', function (e) { alert('event fired') }); }); 工作演示虽然接受的答案是正确的，但我的情况略有不同，但我没有找到答案。我正在动态创建模态，因此它们在页面加载时不存在。我使用 JQuery .append('body') 将它们添加到 DOM 中。因此 $('#mymodal').on('hide.bs.modal', function(e) { 不起作用......我不得不将我的事件侦听器更改为 $(document).on('hide.bs.modal', '#mymodal', function(e) { 去工作。希望这能帮助其他和我有同样情况的人。确保您的页面中确实包含 Bootstrap Javascript 库。那是我的问题。 Bootstrap 文档暗示了这一点，但他们从代码示例中省略了它。这里是它的文件/CDN，因为出于某种原因，他们的网站避免从大多数相关页面链接它：https://getbootstrap.com/docs/4.1/getting-started/download/ 使用 React 更新 2024 Bootstrap 5 我们可以使用 useEffect 来监听关闭、打开模态事件 useEffect(() => { document .getElementById("login-modal") .addEventListener("hidden.bs.modal", function (event) { console.log("close ok"); }); }, []);

jquery twitter-bootstrap modal-dialog

回答 4 投票 0

React JS 中模态数据没有更新

我创建了这个网站前端的克隆，一切都很顺利，但是当我到达购物车部分时，我发现有很多工作要做。简而言之，我只是为我的网站创建一个“添加到购物车”按钮...

javascript reactjs typescript modal-dialog simplemodal

回答 1 投票 0

modal-dialog 相关问题

最新问题