modal-dialog 相关问题

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

如何让模式对话框显示自定义的两个不同按钮?

所以我正在为 Odin 项目开发 TicTacToe 游戏。我有两个不同的创建播放器按钮,我想打开相同的模式对话框,这样我就可以输入两个不同的参数,然后...

回答 1 投票 0

如何制作在 Storybook 中工作的 React 模态组件

你能帮我提供一些关于如何实现在故事书和算法中工作的 ModalBox 的想法吗?它可以像库组件一样实现?

回答 2 投票 0

以角度打开后,模板引用模式中的数据未更新

我有一个登录屏幕,其中我的组件有 2 个模板引用作为模态。一个用于加载栏,另一个用于任何类型的错误 我可以在加载栏中发送登录..文本。但在尝试的过程中...

回答 1 投票 0

在 javascript html 字符串中强制换行

我有 php,用于提取图像 data-caption="'.$attachment_data['caption'].'" 的文本描述 我在 javascript 模式窗口中使用 $("article&

回答 1 投票 0

Bootstrap Modal 不适合屏幕

我实际上正在做一个网站项目,该项目应该适用于iOS和Android。然后,我的问题来了: 在 iOS/Android 分辨率中:我有一个打开模式的按钮,位于一个窗口内

回答 1 投票 0

模态对话框的语义准确的 HTML5 元素

我想知道我的一些 Web 开发人员/设计师同事认为什么是用于模态对话框(如 lightbox、superbox、thickbox 或任何您最喜欢的风格)的最佳 HTML 5 元素...

回答 3 投票 0

我想在 Google 表格对话框中放置 3 个项目,并从文本中选择答案

由于某种原因,该对话框当前仅适用于一个列表。其余列表将被忽略,并且不希望出现在指定的单元格中。我尝试用各种方法解决这个问题...

回答 1 投票 0

在 Apex Oracle 版本中调用模态页面的 jQuery

有人可以帮助使用 Apex Oracle 中的 jquery 吗?当对页面进行文本或更改并且用户在保存之前尝试导航离开时,我想调用 Apex 中的模式页面。 这类似于...

回答 2 投票 0

如何更新 URL 并在 Modal 中渲染组件?网址没有更新

我创建了一个 Modal 作为复合组件,它可以自行管理所有状态。现在我正在尝试打开模式并在其中渲染 PostDetails 组件。模态开放和组件渲染也...

回答 1 投票 0

调整大小时模态内的视频长宽比和间距

我遇到了关于由 组成的模式的调整大小问题,其中包含下面的一些内容(主要是一些控件和按钮)。 根据草图,模态有 3 种不同的百分比尺寸...

回答 1 投票 0

如果我添加固定到标题的位置,模态将变得无法访问

我正在开发一个个人新闻网站,名称是News pews,这是我的第三个项目,我在其他项目中没有遇到这个问题。 该项目有一个搜索按钮,它在

回答 1 投票 0

在 Google Apps 脚本中捕获电子表格应用程序模式对话框的 onClose 事件

我想在从电子表格应用程序关闭模态对话框(使用 showModalDialog() 打开)时执行某些操作。 但是我在

回答 2 投票 0

使用 Portal 和 Promise 创建动态 React 组件

使用简单的函数从我的 React 应用程序中的任何位置调用模态或抽屉。 我已经通过使用 root.render 完成了这项工作,但是 root.render 的问题是他们找不到我以前的任何内容

回答 1 投票 0

如何在pyqt中创建模态窗口?

我查看了文档,发现了“self.setWindowModality(QtCore.Qt.WindowModal)”。 我将此函数添加到我的“init”函数中,但仍然无法创建模式对话框...

回答 1 投票 0

`<div>`<dialog>内`

我想设计一个对话框,使其距视口顶部 4rem,并将其高度限制为距底部最大 4rem。我在对话框中执行以下操作: 顶部边距:4rem; 最大-h...

回答 1 投票 0

关闭画布侧边栏打开时的引导模式

我正在开发一个使用画布外侧边栏菜单的引导网站。将商品添加到购物车后,此菜单会显示一个迷你购物篮,其中购物车内容的宽度小于 980 像素。在底部...

回答 3 投票 0

Sveltekit 重用表单作为另一个表单中的模式

我有以下路线: - 路线 - 艺术家 - [子弹] - 新的 - +page.server.js - +page.svelte 其中 new/+page.svelte 如下: 导入</desc> <question vote="0"> <p>我有以下路线:</p> <pre><code>- routes - artists - [slug] - new - +page.server.js - +page.svelte </code></pre> <p>其中 <pre><code>new/+page.svelte</code></pre> 如下:</p> <pre><code>&lt;script&gt; import ArtistForm from &#34;../../../components/forms/ArtistForm.svelte&#34;; /* data returned from actions function in +page.server.js */ export let form; &lt;/script&gt; &lt;ArtistForm formData={form} mode=&#34;new&#34; /&gt; </code></pre> <p>和<pre><code>+page.svelte</code></pre>仅具有提交表单时必须执行的操作:</p> <pre><code>export const actions = { default: async ({ request, fetch }) =&gt; { const artistAPI = new ArtistAPI(fetch); const data = Object.fromEntries(await request.formData()); const artist = artistDTO(data); // if errors returned from building the DTO (validation errors) then return the object. if (artist?.errors &amp;&amp; !emptyObject(artist.errors)) { return { &#34;data&#34;: artist.data, &#34;errors&#34;: artist.errors, }; } const response = await artistAPI.post(artist); if (response.status == 200) { throw redirect(302, &#39;/artists&#39;) } return { &#34;data&#34;: artist.data, &#34;errors&#34;: response.errors, } } }; </code></pre> <p>现在,这本身就可以很好地工作。每当我访问<pre><code>artists/new</code></pre>时,我都可以创建新的艺术家。</p> <p>问题如下:</p> <p>我有一条<pre><code>routes/records/new</code></pre>路线。 创建记录时,如果艺术家不存在,我希望允许用户通过模式动态创建艺术家。 为此,我加载一个模态,并在模态中加载 <pre><code>&lt;ArtistForm&gt;</code></pre> 组件。该组件有一个 <pre><code>&lt;form&gt;</code></pre> 元素和一个用于提交表单的按钮。</p> <p>这是 <pre><code>routes/records/new</code></pre> 中加载组件的代码片段:</p> <pre><code>{:else if activeStep == &#34;CreateArtist&#34;} &lt;div&gt;Artist does not exist, please add it.&lt;/div&gt; &lt;ArtistForm loadedAsModal={ true } /&gt; &lt;div class=&#34;mt-7 flex justify-center&#34;&gt; &lt;button class=&#34;btn btn-outline btn-primary&#34; type=&#34;submit&#34; on:click={handleSubmit}&gt;Create Artist&lt;/button&gt; &lt;/div&gt; {/if} </code></pre> <p>问题是当我单击“保存”按钮时。当模式中的表单提交时,将调用 <pre><code>routes/records/new/+page.server.js</code></pre> 中定义的操作。艺术家的 <pre><code>action</code></pre> 未触发,我认为这是正确的,因为我正在 <pre><code>routes/records/new</code></pre> 中加载组件,但操作位于 <pre><code>routes/artists/new/+page.server.js</code></pre> 中。</p> <p>我想也许添加一个作为 prop 传递给 <pre><code>&lt;ArtistForm&gt;</code></pre> 的回调方法,但随后我必须复制逻辑,以便回调可以从表单获取数据并执行 POST 请求。</p> <p>有没有什么方法可以解决这个问题而无需(或最少)代码重复?</p> </question> <answer tick="false" vote="0"> <p>正如 @PeppeL-G 所提到的,我们可以通过将操作属性设置为 <pre><code>/artists/new/</code></pre> 来使其工作。这样,当提交表单时,它将从加载表单的任何位置触发<pre><code>/artists/new/+page.server.js</code></pre>中定义的操作,在我的例子中,从在不同路径中加载的模式。</p> <p>现在,我面临的另一个问题是:当表单加载到模态中并成功提交后,我需要在加载模态的路由中返回数据。为了实现这一点,我向 <pre><code>callback</code></pre> 添加了 <pre><code>ArtistForm</code></pre> 属性。这个回调函数将从组件加载的路径传递,在这种情况下我称之为<pre><code>processData</code></pre>:</p> <pre><code>{:else if activeStep == &#34;CreateArtist&#34;} &lt;div&gt;Artist does not exist, please add it.&lt;/div&gt; &lt;ArtistForm loadedAsModal={ true } callback={processData}/&gt; {/if} </code></pre> <p>在 <pre><code>ArtistForm</code></pre> 中,我使用 <pre><code>use:enhance</code></pre> 接收带有 <pre><code>result</code></pre> 参数的函数,该参数保存表单的 <pre><code>data</code></pre> 值,意味着提交表单时从 <pre><code>action</code></pre> 返回的数据。有了这些数据,我可以简单地将其传递给回调函数,并在实例化组件的路径中执行我想要的任何操作:</p> <pre><code>&lt;form method=&#34;POST&#34; class=&#34;pt-10&#34; action=&#34;/artists/new&#34; use:enhance={() =&gt; { return async ({ result }) =&gt; { if (!loadedAsModal &amp;&amp; (result.status &gt;= 200 &amp;&amp; result.status &lt; 300) &amp;&amp; !(&#39;errors&#39; in result.data)) { await goto(&#34;/artists&#34;); return; } if ((&#39;errors&#39; in result.data)) { return; } callbackFn(result); } }}&gt; ... &lt;/form&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

如何选择在 DOM 之后渲染的 HTML 元素

我想选择OKBTN 让 main = document.querySelector("#main"); 让 okBtn = document.querySelector("#ok"); 函数 myAlert(标题,消息,图标){ 让卡=“”; ...

回答 1 投票 0

触发特定模态内容

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

回答 2 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.