js实现移动端弹窗提示框特效插件

js实现移动端弹窗提示框特效插件

一款原生js移动端弹出层插件。点击文本弹窗提示框代码。灵活,方便,小巧,易用。

使用方法
页面引入mDialogMin.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script src="dist/mDialogMin.js"></script>
mdialog1.onclick = function(){
    Dialog.init('大家都吃着聊着笑着',{maskClick : 1});
}
mdialog2.onclick = function(){
    Dialog.init('两秒后自动关闭',2000);
}
mdialog3.onclick = function(){
    Dialog.init('带有title',{
        title : '是否删除?'
    });
}
mdialog4.onclick = function(){
    Dialog.init('<input type="text" placeholder="请输入5个字符"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>',{
        title : '输入点什么吧!',
        button : {
            确定 : function(){
                if(this.querySelector('input').value.length >= 5){
                Dialog.init('你输入的内容是:'+this.querySelector('input').value);
                Dialog.close(this);
            }else{
                Dialog.init('你输入的内容不符合要求!',1100);
            };
            },
            点击关闭 : function(){
                Dialog.init('你点击了关闭',1000);
                Dialog.close(this);
            }
        }
    });
}
mdialog5.onclick = function(){
    Dialog.init('追加样式',{
        title : '警告',
        style : 'padding: 30px 14px;color:red;font-weight: bold;font-size:25px'
    });
}
mdialog6.onclick = function(){
    Dialog.init('<img src="dist/6.jpg" width="100%">',{
        title : '图片预览',
        button : {
            确定 : function(){Dialog.close(this);}
        }
    });
}
mdialog9.onclick = function(){
    Dialog.init('<img src="dist/load3.gif" width="48px"/>',{
        mask : 0,
        addClass : 'dialog_load',
        time : 3000,
        after : function(){
            Dialog.init('加载成功!',1000);
        }
    });
}

文件信息:

    2

    发表评论