手机端弹出层确认框loading加载框文字图片框效果代码-html代码-BFW代码库

手机端弹出层确认框loading加载框文字图片框效果代码

代码语言：html

所属分类：弹出层

代码描述：手机端弹出层确认框loading加载框文字图片框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mdialogmin.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mdialogmin.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .mDialogs {
            display: inline-block;
            padding: 0 20px;
            text-decoration: none;
            outline: none;
            margin: 20px 10px;
            background: #222;
            color: #fff;
            line-height: 40px;
            text-align: center
        }
        .dialog_load2.c_alert_wrap {
            background: none;
            box-shadow: none
        }

        .dialog_load.c_alert_wrap {
            background: none;
        }

        .dialog_load .c_alert_con {
            background: rgba(0,0,0,.7);
            padding: 24px 25px
        }

        .c_alert_con img {
            vertical-align: top
        }
    </style>
</head>
<body>
    <a class="mDialogs" id="mdialog1" href="javascript:;">默认</a>
    <a class="mDialogs" id="mdialog2" href="javascript:;">2秒后自动关闭</a>
    <a class="mDialogs" id="mdialog3" href="javascript:;">带有title</a>
    <a class="mDialogs" id="mdialog4" href="javascript:;">带有按钮</a>
    <a class="mDialogs" id="mdialog5" href="javascript:;">追加样式</a>
    <a class="mDialogs" id="mdialog6" href="javascript:;">其他</a>
    <a class="mDialogs" id="mdialog9" href="javascript:;">正在加载</a>
</body>
<script>
    /**使用说明*************************************/


    // Dialog.init('测试文字') //默认
    // Dialog.init('测试文字',2000) //第二个参数时间，2秒后自动关闭
    // Dialog.init('测试文字',{
    //     time : 1000,  //自动关闭
    //     maskClick : false, //点击背景层是否关闭弹层
    //     mask : false, //是否显示遮罩
    //     title : '是否删除？', //添加标题
    //     index : 1,  //设置索引，用于close方法
    //     addClass : 'bgRed', //追加class
    //     style : 'color:red', //追加css
    //     button : { //按钮
    //         确定 : function(){
    //             Dialog.init('你点击了确定',1000);
    //             Dialog.close(this);
    //         },
    //         取消 : function(){
    //             Dialog.init('你点击了取消',1000)
    //             Dialog.close(this);
    //         }
    //     },
    //     before : function(){
    //         //this.classList.add('autoWidth')
    //         //dom创建成功，但未渲染
    //         console.log('创建成功',this);
    //     },
    //     after : function(){
    //         console.log('.........完整代码请登录后点击上方下载按钮下载查看