artdialog强大的模态对话框

最新推荐文章于 2020-11-20 19:49:36 发布

高远321

最新推荐文章于 2020-11-20 19:49:36 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签：静态对话框

本文链接：https://blog.youkuaiyun.com/u013465194/article/details/84753201

版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了artdialog，一个强大且易用的模态对话框，并提供了详细的接入步骤。通过下载链接获取资源，然后展示了一个基本的对话框示例，并分享了在实际应用中的使用经验，同时提及了如何添加自定义标签及关闭对话框的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个静态对话框是我目前为止见到的最好用的一个对话框。现在将他的接入步骤做一个介绍。参考地址：http://www.51xuediannao.com/js/jquery/artdialog_v6api.html
引入准备：
下载地址：http://www.51xuediannao.com/js/jquery/artdialog_v6api.html

<script src="lib/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/ui-dialog.css">
<script src="dist/dialog-min.js"></script>

举例：普通对话框

var d = dialog({
    title: '欢迎',
    content: '欢迎使用 artDialog 对话框组件！'
});
d.show();

我自己应用：

<div id='zdyDiv'></div>
<input style='padding: 0px 0px 0px 0px; ' class='button' type='button' id='addZkyLabel' value='添加自定义标签'/>

用户标签-添加自定义标签

   //全局变量
   var dialogFlag = 1;//对话框显示标记
   var dlog = null;//对话框标记，方便从外部关闭对话框
    $("#addZkyLabel").click(function () {
        if (dialogFlag == 1) {
            dlog = dialog({
                title: '自定义标签',
                align: 'left',
                content: '<input autofocus id="zkyLabel" value="" />',
                okValue: '确定',
                ok: function () {
                    var value = $('#zkyLabel').val();
                    var reg=/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
                    if(!reg.test(value)){
                        alert("只能输入汉字、英文、数字！");
                        return false;
                    }
                    if (value != "") {
                        this.title('提交中…');
                        var html = document.getElementById("zdyDiv").innerHTML;
                        document.getElementById("zdyDiv").innerHTML = html + "<input name='" + zdyC2 + "[" + index_ + "]' type='checkbox' value='" + value + "' checked='checked'/>" + value + "&nbsp&nbsp";
                        index_++;
                        dialogFlag = 1;
                        return true;
                    }
                    return false;
                },
                cancelValue: '取消',
                cancel: function () {
                    dialogFlag = 1;
                    // return true;
                }
            });
            dlog.show(document.getElementById('popupContact'));
            dialogFlag = 2;
        }
    });

关闭对话框方法

//关闭artDialog对话框
function hideDialog() {
    if (dialogFlag == 2) {
        dlog.close().remove();
        dialogFlag = 1;
    }
}