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

代码语言:html

所属分类:弹出层

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

代码标签: 确认 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>
    /**使用说.........完整代码请登录后点击上方下载按钮下载查看

网友评论0