投稿 搜索

热门文章

当前位置: 站长天下 / 瀑布流提示框 / js实现移动端弹窗提示框特效插件
js实现移动端弹窗提示框特效插件
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-28
    阅读:

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

简要教程

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

使用方法

页面引入mDialogMin.js文件

<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);
        }
    });
}