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

最新推荐文章于 2020-07-17 22:19:10 发布

Annn_kk

最新推荐文章于 2020-07-17 22:19:10 发布

阅读量2.1k

点赞数

分类专栏： JS jQuery 文章标签： JS jQuery

本文链接：https://blog.csdn.net/Annn_kk/article/details/89499124

版权

JS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

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

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

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

jQuery：http://jquery.com/download/

jQuery UI：http://jqueryui.com/download/

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

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

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

<script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-ui-1.11.4.custom\jquery-3.4.0.min.js"></script>

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

<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">

完整的弹出框代码如下：

<!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

Annn_kk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的dialog（对话框）控件实现弹出对话框中添加超链接或者其他事件

如果需要在弹出框中添加相应的超链接可以点击跳转的话。可以使用jQuery框架的dialog控件，同时配上jQuery UI的样式，实现弹出框功能，并且弹出框中还可以填加超链接。所以先需要下载jQuery，和jQuery UI的包。jQuery：http://jquery.com/download/jQuery UI：http://jqueryui.com/download/下载完成后，需...
复制链接

扫一扫

专栏目录