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

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

可以使用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">

完整的弹出框代码如下:


<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

你可能感兴趣的:(JS,jQuery)