首页jquerydialog弹窗

jquerydialog弹窗

时间: 2023-05-28 09:03:22 浏览: 153

JQuery Dialog是一个弹出窗口插件，可以用于显示警告、确认、消息、表单等信息，类似于原生的alert、confirm和prompt，但可以自定义弹窗内容和样式。使用JQuery Dialog，首先需要引入JQuery库和JQuery UI库，然后在HTML中创建一个空容器作为弹窗的目标元素。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>JQuery Dialog Demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <button id="btn">打开弹窗</button> <div id="dialog"></div> <script> $(document).ready(function() { $("#btn").click(function() { $("#dialog").dialog({ title: "提示", modal: true, buttons: { "确定": function() { $(this).dialog("close"); } }, open: function() { $(this).html("这是一个弹窗！"); } }); }); }); </script> </body> </html> ``` 在按钮的点击事件中，调用`dialog()`方法创建一个弹窗，传入一些参数，例如标题、是否模态、按钮等。在`open`回调函数中，可以通过`$(this)`获取弹窗容器元素，再通过`html()`方法设置弹窗内容。 JQuery Dialog还有很多其他的参数和方法，可以根据具体需求进行调整和扩展。

阅读全文