modal-dialog 相关问题

如何在弹出模态窗口时禁用背景

我正在构建一个网页模板，并对模式弹出窗口进行了一些修改，如下所示： 我正在构建一个网页模板，并对模式弹出窗口进行了一些修改，如下所示： <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" style="background-color:#FECE1A;display:none;width:750px;left:46%" aria-hidden="true"> <div class="modal-dialog"> <script> $("#myModal4").on("show", function () { $("body").addClass("modal-open"); }).on("hidden", function () { $("body").removeClass("modal-open") }); </script> <!--Modal Content--> </div> </div> body.modal-open css 函数就像这样 body.modal-open { overflow: hidden; } 弹出窗口工作正常。问题是，每当弹出窗口出现时，我仍然可以单击模板的标题菜单和后台的一些链接。如何禁用后台的所有内容，以便我只能单击弹出窗口中可用的内容。 您可以使用覆盖层 - 另一个覆盖 html 的屏幕全尺寸的 div，其优点是在主体上提供半透明的灰色阴影。 在此示例中，使用两个 div。 一个是覆盖层，另一个（为了方便起见在覆盖层内）是模态框。 <div class="overlay"> <div class="modal"> This is the modal. You can put whatever you like in here. </div> </div> 现在叠加层需要样式： .overlay { position: fixed; /* Positioning and size */ top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(128,128,128,0.5); /* color */ display: none; /* making it hidden by default */ } 模态也需要一些： .modal { position: fixed; /* positioning in center of page */ top: 50vh; left: 50vw; transform: translate(-50%,-50%); height: 400px; /* size */ width: 600px; background-color: white; /* background color */ } 通过输入以下内容来包含 jQuery： <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 在代码顶部的 head 标签中。 然后，使用此按钮打开模式： <button onclick="$('.overlay').show();">Open modal</button> 这个 jQuery 代码用于捕获覆盖层上的点击，但不捕获其子覆盖层上的点击。 $('.overlay').on('click', function(e) { if (e.target !== this) { return; } $('.overlay').hide(); }); $('.overlay').on('click', function(e) { if (e.target !== this) { return; } $('.overlay').hide(); }); .overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(128,128,128,0.5); display: none; } .modal { position: fixed; top: 50vh; left: 50vw; transform: translate(-50%,-50%); height: 400px; width: 600px; background-color: white; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <a href="https://www.google.co.uk">This is a link, but with the modal open you can't click it!</a> <br> <br> <button onclick="$('.overlay').show();">Open modal</button> <div class="overlay"> <div class="modal"> This is the modal. You can put whatever you like in here. </div> </div> 简介 一个简单的解决方案是添加一个 <div> 来覆盖背景，并位于弹出窗口下方但位于所有其他内容上方。 下面是一个非常简单的例子，我想象你正在尝试做的事情。希望您可以调整它以适合您的场景。 示例 function openModal() { $("#overlay").css({"display":"block"}); $("#modal").css({"display":"block"}); } #modal { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); border:solid 1px #000; display:none; background-color:#fff; } #overlay { position:fixed; left:0; top:0; width:100vw; height:100vh; display:none; background-color:#000; opacity:0.5; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Awesome Content! <button onclick="openModal()">Open Modal!</button> <div id="overlay"></div> <div id="modal"><h1>Modal Content!</h1></div> 要点 #overlay div 位于 #modal div 之前 - 这就是我将模态设置为顶部的方式。或者，您可以在 CSS 中使用 z-index； 此处不需要 opacity 值，它只是用作叠加层相对于页面/模式的位置的演示； 这里的实现细节都不重要。 JavaScript 不应该很重要，我的大部分 CSS 也不应该重要。这个例子的存在只是为了给你指明正确的方向。 这是使用 CSS 属性的示例 pointer-events (https://developer.mozilla.org/en/docs/Web/CSS/pointer-events)。 示例：https://codepen.io/zvona/pen/YxQzEO 关键思想是在模态打开时为主体设置 pointer-events: none;。但是您想要与之交互的特定元素应该具有例如pointer-events: auto;。 在示例中，当对话框隐藏时，您可以单击两个按钮，但当显示对话框时，只能单击切换对话框按钮。 当模式打开时： document.body.classList.add('overflow-hidden') 模态关闭时： document.body.classList.remove('overflow-hidden')

Perl Tk::对话框文本宽度与对话框宽度不匹配

我正在使用 Perl 和 Tk::Dialog。 我一生都无法弄清楚如何将对话框内文本框的宽度设置为它包含的文本的宽度。 失败的尝试： 使用严格； 使用

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

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

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

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

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

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

在 javascript html 字符串中强制换行

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

Bootstrap Modal 不适合屏幕

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

`<div>`<dialog>内`

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

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

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

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>

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

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