（移动端）精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

一.效果图

1.1 alert

1.2confirm

1.3 prompt

1.4 toast,tips,msg

二.使用

1.引用文件（依赖项：jquery）后面会提供精简版的`css`和封装的`js`文件

<style>
    /**
     重定义 按钮颜色
     */
    .mui-popup-button {
        color: #9C27B0!important;
        background: rgba(255, 255, 255, .95)!important;
    }
</style>
<script src="js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="css/mer.css" />
<script type="text/javascript" src="js/mer.tool.js"></script>

2.使用

2.1 alert

alert("这是alert弹出提示层");

2.2 confirm

confirm("ccccc",function(){
	 //console.log("确定按钮触发事件");
 },function(){
 	 //console.log("确定按钮触发事件");
});

2.3 prompt

prompt("这是prompt输入对话框",function(value){
	//console.log("确定按钮触发事件,并返回用户输入数据value",value);
},function(){
	//console.log("取消");
});

2.4 toast,tips,msg

toast("这是一个会消失的提示信息")
//或者
tips("这是一个会消失的提示信息")
//或者
msg("这是一个会消失的提示信息")
//达到的效果是相同的

三.附件

3.1`mer.css`

/*!
 * =====================================================
 * 出自：Mui v3.7.2 (http://dev.dcloud.net.cn/mui)
 * =====================================================
 *
 * =====================================================
 * 精简：东明之羞 (https://blog.csdn.net/qq_28254093)
 * =====================================================
 */

.mui-popup-backdrop
{
    position: fixed;
    z-index: 998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;

    opacity: 0;
    background: rgba(0, 0, 0, .4);
}
.mui-popup-backdrop.mui-active
{
    opacity: 1;
}

.mui-popup
{
    position: fixed;
    z-index: 10000;
    top: 50%;
    left: 50%;

    display: none;
    overflow: hidden;

    width: 270px;

    -webkit-transition-property: -webkit-transform,opacity;
    transition-property:         transform,opacity;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
    transform: translate3d(-50%, -50%, 0) scale(1.185);
    text-align: center;

    opacity: 0;
    color: #000;
    border-radius: 13px;
}
.mui-popup.mui-popup-in
{
    display: block;

    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);

    opacity: 1;
}
.mui-popup.mui-popup-out
{
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);

    opacity: 0;
}

.mui-popup-inner
{
    position: relative;

    padding: 15px;

    border-radius: 13px 13px 0 0;
    background: rgba(255, 255, 255, .95);
}
.mui-popup-inner:after
{
    position: absolute;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1px;

    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;

    background-color: rgba(0, 0, 0, .2);
}

.mui-popup-title
{
    font-size: 18px;
    font-weight: 500;

    text-align: center;
}

.mui-popup-title + .mui-popup-text
{
    font-family: inherit;
    font-size: 14px;

    margin: 5px 0 0;
}

.mui-popup-buttons
{
    position: relative;

    display: -webkit-box;
    display: -webkit-flex;
    display:         flex;

    height: 44px;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.mui-popup-button
{
    font-size: 17px;
    line-height: 44px;

    position: relative;

    display: block;
    overflow: hidden;

    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 5px;

    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #007aff;
    background: rgba(255, 255, 255, .95);

    -webkit-box-flex: 1;
}
.mui-popup-button:after
{
    position: absolute;
    z-index: 15;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;

    display: block;

    width: 1px;
    height: 100%;

    content: '';
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;

    background-color: rgba(0, 0, 0, .2);
}
.mui-popup-button:first-child
{
    border-radius: 0 0 0 13px;
}
.mui-popup-button:first-child:last-child
{
    border-radius: 0 0 13px 13px;
}
.mui-popup-button:last-child
{
    border-radius: 0 0 13px 0;
}
.mui-popup-button:last-child:after
{
    display: none;
}
.mui-popup-button.mui-popup-button-bold
{
    font-weight: 600;
}

.mui-popup-input input
{
    font-size: 14px;

    width: 100%;
    height: 26px;
    margin: 15px 0 0;
    padding: 0 5px;

    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 0;
    background: #fff;
}

.mui-plus.mui-android .mui-popup-backdrop
{
    -webkit-transition-duration: 1ms;
    transition-duration: 1ms;
}

.mui-plus.mui-android .mui-popup
{
    -webkit-transition-duration: 1ms;
    transition-duration: 1ms;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
}

/* === Progress Bar === */
.mui-progressbar
{
    position: relative;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 2px;

    -webkit-transform-origin: center top;
    transform-origin: center top;
    vertical-align: middle;

    border-radius: 2px;
    background: #b6b6b6;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.mui-progressbar span
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: 150ms;
    transition: 150ms;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);

    background: #007aff;
}
.mui-progressbar.mui-progressbar-infinite:before
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: mui-progressbar-infinite 1s linear infinite;
    animation: mui-progressbar-infinite 1s linear infinite;

    background: #007aff;
}

body > .mui-progressbar
{
    position: absolute;
    z-index: 10000;
    top: 44px;
    left: 0;

    border-radius: 0;
}

.mui-progressbar-in
{
    -webkit-animation: mui-progressbar-in 300ms forwards;
    animation: mui-progressbar-in 300ms forwards;
}

.mui-progressbar-out
{
    -webkit-animation: mui-progressbar-out 300ms forwards;
    animation: mui-progressbar-out 300ms forwards;
}


.mui-toast-container
{
    line-height: 17px;

    position: fixed;
    z-index: 9999;
    bottom: 50px;
    left: 50%;

    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);

    opacity: 0;
}
.mui-toast-container.mui-active
{
    opacity: .9;
}

.mui-toast-message
{
    font-size: 14px;

    padding: 10px 25px;

    text-align: center;

    color: #fff;
    border-radius: 6px;
    /*background-color: #323232;*/
    background-color: #323232;
}

3.2 mer.js

/**
 * 使用mui样式，实现移动端常用的弹出层
 * 依赖项：jquery 
 */


var m = {}

m.template={
    "alert":'<div mui-id="@id@" class="mui-popup mui-popup-in" style="display: block;"><div class="mui-popup-inner"><div class="mui-popup-title">@title@</div><div class="mui-popup-text">@msg@</div></div><div class="mui-popup-buttons"><span class="mui-popup-button mui-popup-button-bold">@btn@</span></div></div><div  mui-id="@id@" class="mui-popup-backdrop mui-active" style="display: block;"></div>',
    "confirm":'<div mui-id="@id@" class="mui-popup mui-popup-in" style="display: block;"><div class="mui-popup-inner"><div class="mui-popup-title">@title@</div><div class="mui-popup-text">@msg@</div></div><div class="mui-popup-buttons"><span class="mui-popup-button">@btn0@</span><span class="mui-popup-button mui-popup-button-bold">@btn1@</span></div></div><div mui-id="@id@"  class="mui-popup-backdrop mui-active" style="display: block;"></div>',
    "prompt":'<div mui-id="@id@" class="mui-popup mui-popup-in" style="display: block;"><div class="mui-popup-inner"><div class="mui-popup-title">@title@</div><div class="mui-popup-text">@msg@</div><div class="mui-popup-input"><input type="text" autofocus="" placeholder=""></div></div><div class="mui-popup-buttons"><span class="mui-popup-button">@btn0@</span><span class="mui-popup-button mui-popup-button-bold">@btn1@</span></div></div><div mui-id="@id@" class="mui-popup-backdrop mui-active" style="display: block;"></div>',
    "toast":'<div mui-id="@id@"  class="mui-toast-container mui-active"><div class="mui-toast-message">@msg@</div></div>',
}
m.btn={
    btn:"确定",
    btn0:"取消",
    btn1:"确定"
}
m.title="提示";
m.time=2000;

/**
 * 产生随机唯一编号
 * @param {number？} len 默认为36位 返回长度
 * @param {number？} binary 默认为16进制 表示产生的进制包含字符
 * @return 默认返回36位随机字符
 */
m.UUID=function (len,binary ){
    len=!len?36:len;
    binary=!binary?16:binary;
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * binary | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(binary);
    }).substring(0,len)
}

/**
 * @description 确定信息 ，只用一个确定按钮
 * @method alert
 * @for m
 * @param {string} msg 要显示的信息
 * @param {number?} icon 显示的类型 0-6   0:感叹号   1：对号 2：×号 3：问号 4：锁子 5：生气  6：笑脸
 */
m.alert = function (msg,title, okFn) {
    if(!title){
        title=m.title;
    }
    var id=m.UUID();
    $("body").append(m.template.alert.replace(/@title@|@msg@|@btn@|@id@/g,function(e){
        return e=="@title@"?title:e=="@msg@"?msg:e=="@id@"?id:m.btn.btn;
    })).addClass("mui-ios").addClass("mui-ios-11").addClass("mui-ios-11-0");
    $("body").find(".mui-popup-button").on("click",function(){
          $('[mui-id="'+id+'"]').remove();
    });
}


/**
 * @description 提示信息
 * @method msg
 * @for m
 * @param {string} msg 要显示的信息
 * @param {number?} time 显示时间 毫秒    支持 整数值  默认 2000
 */
m.msg = function (msg, time) {
    var id=m.UUID();
    if(!time){
        time=m.time;
    }
    $("body").append(m.template.toast.replace(/@msg@|@id@/g,function(e){
        return e=="@msg@"?msg:e=="@id@"?id:msg;
    })).addClass("mui-ios").addClass("mui-ios-11").addClass("mui-ios-11-0");
    var index=setTimeout(function(){
        clearInterval(index);
        $('[mui-id="'+id+'"]').fadeOut(700);
        var index2=setTimeout(function(){
            clearInterval(index2);
            $('[mui-id="'+id+'"]').remove();
        },750);
    },parseInt(time))
}

/**
 * @description 询问框
 * @method confirm
 * @for m
 * @param {string} msg :要询问的信息
 * @param {function} okFn :当用户选择确定时的回调方法；当回调函数返回值为 false 时阻止关闭 (默认关闭)
 * @param {function?} cancelFn :当用户选择取消时的回调方法；当回调函数返回值为 false 时阻止关闭 (默认关闭)
 */
m.confirm = function (msg, okFn, cancelFn) {
    var id=m.UUID();
    $("body").append(m.template.confirm.replace(/@title@|@msg@|@btn0@|@btn1@|@id@/g,function(e){
        return e=="@title@"?m.title:e=="@msg@"?msg:e=="@btn0@"?m.btn.btn0:e=="@btn1@"?m.btn.btn1:e=="@id@"?id:m.btn.btn;
    })).addClass("mui-ios").addClass("mui-ios-11").addClass("mui-ios-11-0");
    $("body").find(".mui-popup-button.mui-popup-button-bold").on("click",function(){

        $('[mui-id="'+id+'"]').remove();
        if(typeof okFn=="function"){
            okFn();
        }
    });
    $("body").find(".mui-popup-button:not('.mui-popup-button-bold')").on("click",function(){

        $('[mui-id="'+id+'"]').remove();
        if(typeof cancelFn=="function"){
            cancelFn();
        }
    });
}


/**
 * @description 输入对话框
 * @method open
 * @for lay
 * @param {string} msg :要弹出的url地址 如：http://www.baidu.com
 * @param {string[] ?} size [width,height]:弹出层的大小；不传参数时，默认为[可见区域-200,可见区域-100]
 * @param {string ?} title :弹出窗体的标题
 * @param {function} okFn :当用户选择确定时的回调方法；当回调函数返回值为 false 时阻止关闭 (默认关闭)
 * @param {function?} cancelFn :当用户选择取消时的回调方法；当回调函数返回值为 false 时阻止关闭 (默认关闭)
 */
m.prompt = function (msg,title, okFn, cancelFn) {
    if(typeof title=="function"){
        cancelFn=okFn;
        okFn=title;
        title=m.title;
    }

    var id=m.UUID();
    $("body").append(m.template.prompt.replace(/@title@|@msg@|@btn0@|@btn1@|@id@/g,function(e){
        return e=="@title@"?title:e=="@msg@"?msg:e=="@btn0@"?m.btn.btn0:e=="@btn1@"?m.btn.btn1:e=="@id@"?id:m.btn.btn;
    })).addClass("mui-ios").addClass("mui-ios-11").addClass("mui-ios-11-0");
    $("body").find(".mui-popup-button.mui-popup-button-bold").on("click",function(){
        if(typeof okFn=="function"){
            okFn($('[mui-id="'+id+'"]').find("input[type='text']").val());
        }
        $('[mui-id="'+id+'"]').remove();

    });
    $("body").find(".mui-popup-button:not('.mui-popup-button-bold')").on("click",function(){

        $('[mui-id="'+id+'"]').remove();
        if(typeof cancelFn=="function"){
            cancelFn();
        }
    });
}

//覆盖浏览器默认弹出层方法
window.alert =alert  =   m.alert;
window.confirm =confirm  =  m.confirm;
window.prompt =prompt = m.prompt;

window.msg =msg= m.msg;
window.tips =tips  = m.msg;
window.toast =toast =m.msg;

`有兴趣的伙伴可以使用、再次进行修改，祝大家步步高升，财源滚滚来。`

移动端精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

（移动端）精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

一.效果图

1.1 alert

1.2confirm

1.3 prompt

1.4 toast,tips,msg

二.使用

1.引用文件（依赖项：jquery）后面会提供精简版的`css`和封装的`js`文件

2.使用

2.1 alert

2.2 confirm

2.3 prompt

2.4 toast,tips,msg

三.附件

3.1`mer.css`

3.2 mer.js

`有兴趣的伙伴可以使用、再次进行修改，祝大家步步高升，财源滚滚来。`

HTTP URL 详解

Javascript自旋執行一段代碼，直到得到指定的結果或達到最大次數才結束

javascript根據固定長度分詞

android全屏，隱藏標題欄

使用idea寫android應用時，配置錯誤問題

linux CentOS rsync 服務端配置文件及詳細的配置使用過程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

移动端 精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

（移动端） 精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

一.效果图

1.1 alert

1.2confirm

1.3 prompt

1.4 toast,tips,msg

二.使用

1.引用文件（依赖项：jquery）后面会提供精简版的css和封装的js文件

2.使用

2.1 alert

2.2 confirm

2.3 prompt

2.4 toast,tips,msg

三.附件

3.1mer.css

3.2 mer.js

有兴趣的伙伴可以使用、再次进行修改，祝大家步步高升，财源滚滚来。

移动端精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

（移动端）精简mui.css,实现mui的弹出层（不使用mui.js，只包含弹出层）

1.引用文件（依赖项：jquery）后面会提供精简版的`css`和封装的`js`文件

3.1`mer.css`

`有兴趣的伙伴可以使用、再次进行修改，祝大家步步高升，财源滚滚来。`