jQuery的dialog（对话框）控件实现弹出对话框中添加超链接或者其他事件

ゝ一世哀愁。 2022-02-15 15:31 317阅读 0赞

如果需要在弹出框中添加相应的超链接可以点击跳转的话。

可以使用jQuery框架的dialog控件，同时配上jQuery UI的样式，实现弹出框功能，并且弹出框中还可以填加超链接。

所以先需要下载jQuery，和jQuery UI的包。

jQuery：[http://jquery.com/download/][http_jquery.com_download]

jQuery UI：[http://jqueryui.com/download/][http_jqueryui.com_download]

下载完成后，需要按照顺序引用jQuery，和jQuery UI的包。

先引用jQuery，再引用jQuery UI，因为jQuery UI对jQuery有依赖关系。

从下载好的jQuery 包中引入 jquery-3.4.0.min.js

从jQuery UI包中引入 jquery-ui.js 和 样式文件 jquery-ui.css

完整的弹出框代码如下：

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>jQuery UI 对话框（Dialog） - 默认功能</title>
        <script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-ui-1.11.4.custom\jquery-3.4.0.min.js"> </script>
        <script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-ui-1.11.4.custom\jquery-ui.js"></script>
        <link rel="stylesheet" href="C:\Users\Administrator\Desktop\jquery-ui-1.11.4.custom\jquery-ui.css">
        <script> $(function () { $("#dialog1").dialog({ autoOpen: true, // 是否自动弹出窗口 modal: true, // 设置为模态对话框,设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作 resizable: true, //是否可以调整对话框的大小 width: 410, //弹出框宽度 height: 240, //弹出框高度 title: "离职指引", //弹出框标题,可以是 html 串，例如一个超级链接 position: "center", //窗口显示的位置,用来设置对话框的位置，有三种设置方法,(字符串,数组,字符串组成的数组) draggable: false, //对话框是否可以被拖动 hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错,默认为 null buttons: { //显示一个按钮，并写上按钮的文本，设置按钮点击函数 '确定': function () { //单击按钮后的回调函数，就是按钮被单击后的响应事件 }, '取消': function () { //单击按钮后的回调函数，就是按钮被单击后的响应事件 $(this).dialog("close"); } } }); }); </script>
    </head>
    
    <body>
    
        <div id="dialog1" title="离职指引">
            <p><a href="https://baike.baidu.com/" style="display: block;text-align: center;">点击前往离职指引</a></p>
        </div>
    
    
    </body>
    
    </html>

jQuery UI 实例 - 对话框（Dialog）  
[http://www.runoob.com/jqueryui/example-dialog.html][http_www.runoob.com_jqueryui_example-dialog.html]

[http_jquery.com_download]: http://jquery.com/download/
[http_jqueryui.com_download]: http://jqueryui.com/download/
[http_www.runoob.com_jqueryui_example-dialog.html]: http://www.runoob.com/jqueryui/example-dialog.html