modal-dialog 相关问题

为什么 Brave 不在 https://bibliotheek.be 上显示模式弹出窗口

网站 https://bibliotheek.be 显示一个模式弹出窗口，可以在其中接受或拒绝 cookie。 Brave 不会显示弹出窗口，从而导致该网站无法访问。我搜索了我的设置，甚至尝试了

如何为html中的不同元素指定某些模态？

我正在尝试为多个元素添加多个模式，但我使用的代码仅适用于一个元素，每当我尝试添加多个元素时，它们就会停止工作，拜托，这是怎么回事。 ..

Chakra UI 在单个组件中使用多个模型

我正在使用 Chakra UI，我想在单个组件中使用两个模态。 const { isOpen , onOpen, onClose } = useDisclosure() 我正在使用 Chakra UI，我想在单个组件中使用两个模态。 const { isOpen , onOpen, onClose } = useDisclosure() <Button colorScheme="teal" size="xs" mr='2' onClick={onOpen} > Edit </Button> {/* Edit modal */} <Modal isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Edit Modal</ModalHeader> <ModalCloseButton /> <ModalBody> Edit Modal </ModalBody> <ModalFooter> <Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button> <Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}> Delete </Button> </ModalFooter> </ModalContent> </Modal> {/* Delete Address */} <Button colorScheme="red" size="xs" onClick={onOpen}> Delete </Button> <Modal isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Delete Shipping Address</ModalHeader> <ModalCloseButton /> <ModalBody> Are you sure you want to delete the shipping address? </ModalBody> <ModalFooter> <Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button> <Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}> Delete </Button> </ModalFooter> </ModalContent> </Modal> isOpen、onOpen和onClose不能作为变量更改，因为它们是内置的 Chakra 函数。 有人可以建议我一种方法来改变其中两个模态（Chakra UI）操作吗？ 您可以简单地更改变量的名称 isOpen、onOpen 和 onClose 走吧： const { isOpen: isEditOpen , onOpen: onEditOpen, onClose: onEditClose } = useDisclosure() const { isOpen: isDeleteOpen , onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure() {/* Edit Button*/} <Button colorScheme="teal" size="xs" mr='2' onClick={onEditOpen} > Edit </Button> {/* Edit Modal */} <Modal isOpen={isEditOpen} onClose={onEditClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Edit Modal</ModalHeader> <ModalCloseButton /> <ModalBody> Edit Modal </ModalBody> <ModalFooter> <Button variant="ghost" mr={3} onClick={onEditClose}>Cancel</Button> <Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}> Delete </Button> </ModalFooter> </ModalContent> </Modal> {/* Delete Button*/} <Button colorScheme="red" size="xs" onClick={onDeleteOpen}> Delete </Button> {/* Delete Modal*/} <Modal isOpen={isDeleteOpen} onClose={onSecondModalClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Delete Shipping Address</ModalHeader> <ModalCloseButton /> <ModalBody> Are you sure you want to delete the shipping address? </ModalBody> <ModalFooter> <Button variant="ghost" mr={3} onClick={onDeleteClose}>Cancel</Button> <Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}> Delete </Button> </ModalFooter> </ModalContent> </Modal> 再举一个例子： 第一个模态： const { isOpen: isFirstModalOpen , onOpen: onFirstModalOpen, onClose: onFirstModalClose } = useDisclosure() 第二个模态： const { isOpen: isSecondModalOpen , onOpen: onSecondModalOpen, onClose: onSecondModalClose } = useDisclosure() 现在这些变量具有不同的值，因此您可以在任何地方使用新名称！ 您可以创建一个使用 useDisclosure 的自定义模态组件。然后，您可以拥有此自定义模态组件的多个实例，而无需模态共享相同的状态： const CustomModal = ({ showModalButtonText, modalHeader, modalBody }) => { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <> <Button colorScheme="red" size="xs" onClick={onOpen}> {showModalButtonText} </Button> <Modal isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>{modalHeader}</ModalHeader> <ModalCloseButton /> <ModalBody>{modalBody}</ModalBody> <ModalFooter> <Button variant="ghost" mr={3} onClick={onClose}> Cancel </Button> <Button colorScheme="red" onClick={() => { alert(1); }} > Delete </Button> </ModalFooter> </ModalContent> </Modal> </> ); }; export default function App() { return ( <div className="App"> <CustomModal showModalButtonText="Edit" modalHeader="Edit Modal" modalBody="Edit Modal" /> <CustomModal showModalButtonText="Delete" modalHeader="Delete Shipping Address" modalBody="Are you sure you want to delete the shipping address?" /> </div> ); } 这样 CustomModal 的每个实例都会跟踪自己的 isOpen、onOpen 和 onClose 状态。 由于在您的问题中，唯一的动态部分是打开按钮、模式、标题文本和模式正文文本，因此我制作了道具，以便可以为每个实例单独设置这些道具。如果更多部件需要动态，您可以根据需要添加道具。 我对模态做了一些小改动，以使其更容易测试。 您可以简单地创建两个 useDisclosure 钩子实例。 const { isOpen: isAssociationModalOpen, onOpen: onOpenAssociationModal, onClose: onCloseAssociationModal, } = useDisclosure(); const { isOpen: isRevocationModalOpen, onOpen: onOpenRevocationModal, onClose: onCloseRevocationModal, } = useDisclosure(); 所以基本上你可以更改变量的名称 isOpen、onOpen 和 onClose，或者你可以有两个 useDisclosure 实例，这样你就可以在代码中使用两个或多个模态： import React, { useState } from 'react' import { data } from '../../../utils/Data/data' import { Table, Thead, Tbody, Tfoot, Tr, Th, Td, Checkbox, CheckboxGroup, Skeleton, Box, VStack, Button, HStack, useDisclosure } from '@chakra-ui/react' import EditSiteModal from '../Modal/EditSiteModal' import DeleteSiteModal from '../Modal/DeleteSiteModal' const MySites = () => { const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditClose } = useDisclosure() const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure() return ( <> <Box bgColor="white" p={10}> <Box bgColor="white"> <EditSiteModal isOpen={isEditOpen} onClose={onEditClose} /> <DeleteSiteModal isOpen={isDeleteOpen} onClose={onDeleteClose} /> <Table variant='simple'> <Thead> <Tr bg="#F9F9F9" p="2" > <Th></Th> <Th textTransform={'capitalize'}>Site Name</Th> <Th textTransform={'capitalize'}>Admin</Th> <Th textTransform={'capitalize'}>Creation date & Time</Th> <Th textTransform={'capitalize'}>Actions</Th> </Tr> </Thead> <Tbody> {data && data.map((sites, index: number) => { return ( <Tr key={index} cursor={"pointer"}> <Td><Checkbox></Checkbox></Td> <Td>{sites.site_name}</Td> <Td>{sites.admin}</Td> <Td>{sites.creation_date}</Td> <Td> <HStack> <Button type="button" bg="transparent" border="1px" borderRadius="base" borderColor="#1818183D" width="inherit" onClick={onDeleteOpen} mr="8px" > Delete </Button> <Button type="button" bg="transparent" border="1px" borderRadius="base" borderColor="#F6B319" width="inherit" onClick={onEditOpen} > Edit </Button> </HStack> </Td> </Tr> ); })} </Tbody> </Table> </Box> </Box> </> ) } export default MySites 其他答案不包括您需要映射许多元素并让每个元素在单击时打开一个包含其值的模式的情况。 这里有一个方法： 允许所有这些元素打开同一个模态 使用 useState 更改该模式的内容 如何： 在每个元素的 onClick 中，调用一个函数：使用其值设置状态 + 调用 useDisclosure 的 onOpen() 只需使用模态中的状态值 您可以通过在此页面上搜索“modal”一词来查看示例（包含 const [modalValue, setModalValue] = useState({}) 的代码部分）：https://www.educative.io/answers/how-to-make-a-chakra- ui-and-react-to-do-list-app-using-hooks-only 我在我的项目中也遇到过同样的情况。这就是我解决这个问题的方法： function MyApp() { const modal1 = useDisclosure() const modal2 = useDisclosure() return ( <> <Button onClick={modal1.onOpen}>Open Modal 1</Button> <Button onClick={modal2.onOpen}>Open Modal 2</Button> <Modal isOpen={modal1.isOpen} onClose={modal1.onClose}> // modal body </Modal> <Modal isOpen={modal2.isOpen} onClose={modal2.onClose}> // modal body </Modal> </> ) } 您可以根据您的场景使用 editModal 和 deleteModal。

如何关闭模态窗口并使用相同的链接自动导航到锚点？

我正在使用 Bootstrap 3.0，我有一个打开的模态窗口，底部有两个“按钮”，一个说“联系我们”，另一个说“关闭”。 当有人点击“联系我们”按钮时，我想要 M...

在 SwiftUI 中以编程方式自动聚焦 TextField

我正在使用模式将名称添加到列表中。当显示模式时，我想自动聚焦 TextField，如下所示： 我还没有找到任何合适的解决方案。 有什么实施吗...

在对话框模式上方分层 toast 警报

将 DaisyUI 模式（TailwindCSS UI 库）与 Toast 警报库组合时，我似乎找不到任何允许我的全局 Toast 警报出现在模式对话框上方的 CSS（而只是

多次使用的引导模式

Bootstrap Modal - 它看起来非常漂亮和漂亮，我已经看到了很好的解决方案......但我需要帮助。 以下任务：我即将使用 Bootstrap 3.0 作为电子商务模板。所以我会有很多“

Bootstrap 模式中的 PHP 联系表单

好的，我是新手，欢迎任何反馈 我想使用引导模式作为联系表单。我已经在 php 中有一个联系表单，但是如何以模式格式显示它 那...

模型框无法在React js中打开

从 'react' 导入 React, { useEffect, useRef }; const 模态 = () => { const modalRef = useRef(null); 使用效果（（）=> { const modals = document.querySelectorAll('.modal'); 模组...

React：自动聚焦模态内的输入字段

我使用Antd。我有由表单组成的模态窗口。当用户打开模式窗口时，我想关注输入字段。我如何在功能组件中做到这一点？我尝试这样做，但对我不起作用： 常量

拦截路由nextjs不渲染Modal

当尝试使用 nextjs 新应用程序路由器的拦截路由功能将其与 Modal 一起使用时，Modal 永远不会被渲染，只有 url 发生变化。 我的项目结构如下所示： ...

以下数据将被提交到服务器（在 Laravel 8 中）

我尝试在此页面上使用模态，但遇到错误 127.0.0.1:8080 表示以下数据已提交到服务器

滚动在固定和绝对位置不起作用

滚动不适用于固定和绝对位置，我不知道还要添加什么 .modal-overlay { z 索引：9999； 不透明度：1； 位置：固定； 顶部：0； 右：0； 底部：0； 左...

如何解决模态弹出窗口未关闭的问题

在我的项目页面上，我在卡片中显示项目，当您单击卡片时，会弹出一个模式，其中包含有关该项目的详细信息。这与“服务”页面相同。一切正常

ContentPage 的内容未填满整个页面 - 毛伊岛

在我的应用程序（适用于 iOS，使用 iPhone 14 Plus 进行测试）中，我有一个页面想要显示为模式。目前的问题是，当我将其显示为模式时，内容没有填充整个...

动态创建jquery模态对话框

我想在运行我的页面时动态创建一个 jquery 对话框模式，但我无法获得它模式，我得到一个无模式对话框 这是我的简单代码 函数 show()...</desc> <question vote="0"> <p>我想在运行我的页面时动态创建一个jquery对话框模式，但我无法得到它<strong>modal</strong>，我得到一个无模式对话框</p> <p>这是我的简单代码</p> <pre><code> &lt;script&gt; function show() { var dialog = $(&#39;&lt;div id=&#34;msg_dialog&#34;&gt;&lt;/div&gt;&#39;).dialog(); dialog.dialog({ modal: true, autoOpen: true, title: &#39;Test&#39;, buttons: [ { text: &#39;Ok&#39;, click: function() { $(&#39;#res&#39;).empty().append(&#39;&lt;h1&gt;Open&lt;h1&gt;&#39;); $(&#39;#msg_dialog&#39;).remove(); } }, { text: &#39;Cancel&#39;, click: function() { $(&#39;#res&#39;).empty().append(&#39;&lt;h1&gt;Close&lt;h1&gt;&#39;); $(&#39;#msg_dialog&#39;).remove(); } } ] }); } &lt;/script&gt; </code></pre> </question> <answer tick="false" vote="0"> <p><strong>加载模态加载</strong> 确保在加载时运行该函数。 试试这个代码： 将 <pre><code>&lt;body&gt;</code></pre> 替换为 </p> <pre><code>&lt;body onload=&#34;show();&#34;&gt; </code></pre> <p>或者你可以添加这一行</p> <pre><code>window.onload = function(){show();}; </code></pre> <p><strong>简单的模态代码可帮助您纠正代码</strong></p> <pre><code>$(&#34;#dialog-message&#34;).dialog({ modal: true, draggable: false, resizable: false, position: [&#39;center&#39;, &#39;top&#39;], show: &#39;blind&#39;, hide: &#39;blind&#39;, width: 400, dialogClass: &#39;ui-dialog-osx&#39;, buttons: { &#34;I&#39;ve read and understand this&#34;: function() { $(this).dialog(&#34;close&#34;); } } }); </code></pre> <p>来源：<a href="http://jsfiddle.net/db5SX/" rel="nofollow">http://jsfiddle.net/db5SX/</a></p> </answer> </body></html>

Ionic 5 模态模态缺少离子背景

当我在另一个模态之上打开一个模态时，为什么我的离子背景 + 模态阴影样式不起作用？ 前言：这在 V4 上运行良好，但在升级到 V5 时出现问题。我不想变...

Scriptaculous / 原型模态窗口

我想使用prototype和scriptaculous制作一个模态窗口。我想知道是否有任何网站有教程，或者是否有人可以给我一些想法从哪里开始。 （我不...

React 中的自定义模式（打开和关闭问题）

所以，我正在尝试在 React 中制作一个模态。我将模态与触发并渲染它以显示自身的元素分离到另一个文件中。模式打开，但由于某种原因，当我尝试...

Discord Modal 更新后不更新 TextInput 标签 (Python)

过去几天我一直在学习如何编写机器人并有了大概的想法，但现在我遇到了这个问题： 类 FormButtons(discord.ui.View): def __init__(自身): 超级（）。