首页jquery showdialog

jquery showdialog

时间: 2023-07-28 21:42:19 浏览: 143

jQuery ShowDialog 是一个基于 jQuery 的对话框插件，可以用于网页中弹出对话框的显示和隐藏。要使用 jQuery ShowDialog 插件，需要先在页面中引入 jQuery 库和 ShowDialog 插件的js文件，然后在需要弹出对话框的按钮或链接上绑定一个事件，在事件处理函数中调用 showDialog() 函数即可。例如： ```html <!DOCTYPE html> <html> <head> <title>jQuery ShowDialog 示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="jquery.showdialog.js"></script> </head> <body> <button id="btnShowDialog">弹出对话框</button> <div id="dialog" style="display:none;"> <h2>这是一个对话框</h2> <p>你可以在这里输入内容。</p> <button id="btnCloseDialog">关闭对话框</button> </div> <script> $(function() { $('#btnShowDialog').click(function() { $('#dialog').showDialog(); }); $('#btnCloseDialog').click(function() { $('#dialog').hideDialog(); }); }); </script> </body> </html> ``` 在上面的代码中，我们在页面中定义了一个按钮和一个隐藏的 div 元素作为对话框的容器，并在 div 中添加了一些内容和一个关闭按钮。然后在页面中引入了 jQuery 和 ShowDialog 插件的 js 文件，并在页面加载完成后绑定了两个事件处理函数，分别用于弹出对话框和关闭对话框。当用户点击“弹出对话框”按钮时，调用 $('#dialog').showDialog() 函数显示对话框；当用户点击对话框中的“关闭对话框”按钮时，调用 $('#dialog').hideDialog() 函数隐藏对话框。

阅读全文