dialog 相关问题

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

jquery dialog modal-dialog

回答 0 投票 0

在 Typescript 中使用 `inert` 属性时出错

我使用 Typescript 模板创建了一个普通的 create-react-app。我添加了以下行：该应用程序甚至无法运行，因为打字稿抛出错误

reactjs typescript dialog create-react-app

回答 2 投票 0

ReactJS更新到v3后如何控制DaisyUI Modal？

更新到 DaisyUI 版本 3 后，我不再能够控制响应式模式如何打开和关闭。我正在使用 ReactJS。有人可以帮帮我吗？ // 模态按钮更新到 DaisyUI 版本 3 后，我不再能够控制响应模式如何打开和关闭。我正在使用 ReactJS。有人可以帮我吗？ // modal button <button className="btn" onClick={()=>window.my_modal_5.showModal()}>open modal</button> // modal <dialog id="my_modal_5" className="modal modal-bottom sm:modal-middle"> <form method="dialog" className="modal-box"> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Press ESC key or click the button below to close</p> <div className="modal-action"> {/* if there is a button in form, it will close the modal */} <button className="btn">Close</button> </div> </form> </dialog> 它说，“使用 ID.showModal() 方法打开模式”我只是不明白这意味着什么。在DaisyUI的上一个版本中，这个麻烦不存在。我在一个旧项目中使用它，我还在我的项目中更新了 daisyUI npm 包。在 daisui v3 中，使用模式的首选方式是使用新的 Html-dialog-element，所有浏览器都支持它。使用 Html-dialog-element 的好处是多方面的。查看这篇有用的博客文章：https://blog.webdevsimplified.com/2023-04/html-dialog/ 在 React 中使用它，查看这个示例： function Modal({title, text, visible, onClose}) { const modalRef = useRef(null); useEffect(() => { if (!modalRef.current) { return; } visible ? modalRef.current.showModal() : modalRef.current.close(); }, [visible]); const handleClose = () => { if (onClose) { onClose(); } } const handleESC = (event) => { event.preventDefault(); handleClose(); } return ( <dialog ref={modalRef} id="my_modal_1" className="modal" onCancel={handleESC}> <form method="dialog" className="modal-box"> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Press ESC key or click the button below to close</p> <div className="modal-action"> {/* if there is a button in form, it will close the modal */} <button className="btn" onClick={handleClose}>Close</button> </div> </form> </dialog> ); }

reactjs dialog tailwind-css daisyui

回答 1 投票 0

dialog 相关问题

最新问题