模拟原生移动web提示框

第一种：

window.alert = function(name){
        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
      }

第二种

var fun = {
        confirm: function (info, title, btnArray, callback) {
            let div = document.createElement('div');
            div.innerHTML = '<div style="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;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;"><div style="position: relative;padding: 15px;border-radius: 13px 13px 0 0;background: rgba(255, 255, 255, .95);"><div  style="font-size: 18px;font-weight: 500;text-align: center;">' + title + '</div><div  style="font-family: inherit;font-size: 14px;margin: 5px 0 0;">'+info+'</div></div><div  style="position: relative;display: -webkit-box;display: -webkit-flex;display: flex;height: 44px;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;"><span  id="nn" style="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;border-radius: 0 0 0 13px;">'+btnArray[0]+'</span><span  id="yy" style="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;border-radius: 0 0 13px;font-weight: 600;">'+btnArray[1]+'</span></div></div><div  style="position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;-webkit-transition-duration: 400ms;transition-duration: 400ms;opacity: 1;background: rgba(0, 0, 0, .4);display: block"></div>' ;
            document.body.appendChild(div);
            let yy = document.getElementById('yy');
            let nn = document.getElementById('nn');
            yy.onclick = function () {
                if (typeof callback === "function"){
                    callback(1);
                }
                div.parentNode.removeChild(div);
            };

            nn.onclick = function () {
                if (typeof callback === "function"){
                    callback(0);
                }
                div.parentNode.removeChild(div);
            };
        },
        alert: function (info, title, callback) {
            let div = document.createElement('div');
            div.innerHTML = '<div style="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;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;"><div  style="position: relative;padding: 15px;border-radius: 13px 13px 0 0;background: rgba(255, 255, 255, .95);"><div  style="font-size: 18px;font-weight: 500;text-align: center;">'+title+'</div><div  style="font-family: inherit;font-size: 14px;margin: 5px 0 0;">'+info+'</div></div><div  style="position: relative;display: -webkit-box;display: -webkit-flex;display: flex;height: 44px;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;"><span  id="cc" style="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;font-weight: 600;border-radius: 0 0 13px 13px;">确定</span></div></div><div  style="position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;-webkit-transition-duration: 400ms;transition-duration: 400ms;opacity: 1;background: rgba(0, 0, 0, .4);display: block"></div>';
            document.body.appendChild(div);
            let cc = document.getElementById('cc');
            cc.onclick = function () {
                if (typeof callback === "function"){
                    callback();
                }
                div.parentNode.removeChild(div);
            };
        }
    };


//调用
fun.alert('内容', '标题', function() {
    console.log('确定');
});

fun.confirm('内容', '标题1',['否', '是'],function (e) {
    if (e == 1) {
        console.log('是');
    } else {
        console.log('否');
    }
});