modal-dialog 相关问题

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

单击按钮时我的模态框未触发。我已经尝试了我所知道的所有可能的方法，并尝试了所有可能的“Hit & Try”方法。所以我回到这个论坛寻求帮助。我的代码是

php ajax modal-dialog

回答 2 投票 0

我有一个 html 文件，看起来像这样，它很长，我只是向您展示其中的一小部分： ... 我有一个 html 文件，看起来像这样，它很长，我只是向您展示其中的一小部分： <body lang=EN-US style='word-wrap:break-word'> <div class=WordSection1> <p align=center style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt; margin-left:0in;text-align:center'><b><span style='font-size:14.0pt;font-family: "Segoe UI",sans-serif;color:#172B4D;letter-spacing:-.05pt'>İstifadə şərtləri razılıq anlaşması</span></b></p> <p align=center style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt; margin-left:0in;text-align:center'><strong><span lang=AZ-LATIN style='font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#172B4D; letter-spacing:-.05pt'>(Xidmət şərtləri və Məxfilik siyasəti)</span></strong></p> </div> </body> 我的一个组件中有一个modal，我需要显示这个html内容，它基本上是一些样式文本，在这个模式中没有任何功能。我尝试将此 html 文件保存在我的 public 文件夹或 src 文件夹中。但即使当我尝试导入文档时，它也看不到它或导入它。我需要一个简单的方法来解决这个问题最简单的方法之一（根据你的喜好）可能是 React 的 dangerouslySetInnerHTML。您可以将外部 html 内容作为纯文本导入，然后将其设置到 div 中。这是样本。 function createMarkup() { // Read your html content here. return {__html: 'First · Second'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; } https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html 顾名思义，这样做是危险的。所以使用时要谨慎。使用时应格外小心！如果里面的 HTML 不可信（例如例如，如果它基于用户数据），您就有引入 XSS 的风险脆弱性。

javascript html css next.js modal-dialog

回答 1 投票 0

Bootstrap 5 从另一个模态打开模态而不关闭第一个模态

我正在尝试从模式中打开确认模式而不关闭第一个模式，但似乎 Bootstrap 5 的行为与 4 版本不同。以下 Bootstrap 4 版本可按预期工作 https://...

modal-dialog bootstrap-modal bootstrap-5

回答 3 投票 0

关闭模式

我在尝试使用 AngularJS 关闭模式时遇到了困难。我正在做的是在触发事件时打开一个简单的模态，在模态内执行某些操作，然后确认或中止操作...

javascript angularjs modal-dialog

回答 1 投票 0

有没有办法向用户提问并等待答案？

我有的是文本编辑器中的脚本。我需要在继续处理之前询问用户确认，例如：而真实：一些_处理（）； if showYesNoPopup("继续？") == '否':...

python modal-dialog blender

回答 1 投票 0

使用 NzModalFooterDirective 时测试组件

我有一个简单的组件想要测试。我从另一个组件加载这个组件作为模态： const modal = this.modalService.create({ nzContent：MyModalComponent }); 组件 @

angular testing modal-dialog jestjs ng-zorro-antd

回答 4 投票 0

ServiceStack Blazor 模式无法打开以编辑现有播放器 DTO

我正在使用 ServiceStack 并使用框架提供的标准模式来处理 Blazor Web 应用程序中的 CRUD 操作。创建新记录时，模式会按预期打开，但...

c# blazor modal-dialog servicestack web-development-server

回答 1 投票 0

如何通过按 esc 关闭模态框

我是 Javascript 新手，除了单击跨度之外，我还想通过按 esc 键关闭此模式。怎么写呢？ var modal = document.getElementById('myModal'); 变量...

javascript html modal-dialog

回答 1 投票 0

简单模态弹出窗口无法正常工作 ASP.NET Core 5

我正在尝试有一个简单的模式弹出窗口显示新闻文章。这是在主页上。我显示文章，如果它们超过 200 个字符，我会用一个按钮替换剩余的字符

c# razor modal-dialog asp.net-core-5.0

回答 1 投票 0

模式搜索框中的 select2 无法像禁用一样工作

我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用一样我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用了 <div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 这是我的模态代码 $('#m_modal_1').on('shown.bs.modal', function () { $('#id_golongan').select2({ placeholder: "Pilih Golongan" }) }); 这是我的JS 我已经摆脱了 tabindex="-1" 并使用了 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 但不起作用，如果我使用 dropdownParent: $("#modal_penguasaan") 当我点击时模态消失我该怎么做才能使当我单击 select2 时模式不会消失并且搜索框正常工作这就是我解决问题的方法；而不是在模式中删除 tabindex="-1"：我编写了以下代码，它适用于 Bootstrap 版本 >5.2： $(document).ready(function () { $.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("#single-select-field").select2({ theme: "bootstrap-5", placeholder: "Select a category", allowClear: true, dropdownParent: $("#addModal") //ID of the Modal, }); });

html bootstrap-4 modal-dialog jquery-select2

回答 1 投票 0

任何点击都会打开模态窗口

我已经搜索了一半的互联网，但仍然找不到解决方案。如何制作一个简单的模式窗口，单击网站上的任何标签时都会打开该窗口。澄清一下：当您单击

javascript html css modal-dialog

回答 1 投票 0

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

我正在构建一个网页模板，并对模式弹出窗口进行了一些修改，如下所示：我正在构建一个网页模板，并对模式弹出窗口进行了一些修改，如下所示： <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>  </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')

javascript html css modal-dialog

回答 4 投票 0

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

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

perl modal-dialog tk-toolkit text-width

回答 1 投票 0

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

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

javascript html templates button modal-dialog

回答 1 投票 0

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

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