js弹框纯CSS打造，适合手机网页的提示
/**
* Created by adophper.com on 13-12-27.
* tips(msg);
*/
//便捷方法
var _CalF = {
$ : function(id){return document.getElementById(id)},
create : function(id){return document.createElement(id)},
append : function(id){return document.body.appendChild(id)},
remove : function(id){return document.body.removeChild(id)}
}
//弹框
function tips(msg){
var popDiv = _CalF.create(“div”);
popDiv.id = “popDiv”;
popDiv.style.cssText = “width:100%;height:100%;position:absolute;left:0;top:0;filter:alpha(opacity=50);opacity:0.5;border:0;background-color:#000;z-index:100;overflow:hidden;”;
_CalF.append(popDiv);
var pop_boxDiv = _CalF.create(“div”);
pop_boxDiv.id = “pop_boxDiv”;
pop_boxDiv.style.cssText = “position: fixed; top: 100px; left: 20%; width: 60%; height: auto; padding: 5px 10px; background-color:#fff;border-radius: 5px; -webkit-border-radius:5px; -moz-border-radius-5px;z-index:101;overflow:hidden;”;
_CalF.append(pop_boxDiv);
var closeDiv = _CalF.create(“div”);
closeDiv.id = “closeDiv”;
closeDiv.innerHTML = “<span style=’cursor: pointer;’ onclick=’closeTips();’>×</span>”;
closeDiv.style.cssText = “font-size: 150%; font-weight: bold;text-align:right;”
pop_boxDiv.appendChild(closeDiv);
var msgDiv = _CalF.create(“div”);
msgDiv.id = “msgDiv”;
msgDiv.innerHTML = msg;
msgDiv.style.cssText = “text-align:center;color:#222;font-size:80%;line-height: 26px;”;
pop_boxDiv.appendChild(msgDiv);
var btnInput = _CalF.create(“button”);
btnInput.id = “btnInput”;
btnInput.innerText = “确 定”;
btnInput.setAttribute(“onclick”,”closeTips()”);
btnInput.style.cssText = “display:block;margin:20px auto 5px;width: 40%;padding: 5px;border:1px solid #ccc;background-image: -moz-linear-gradient(top, #ffffff, #cccccc);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #cccccc));color: #222; font-size: 80%;border-radius: 5px; -webkit-border-radius:5px; -moz-border-radius-5px;cursor:pointer;”;
pop_boxDiv.appendChild(btnInput);
return false;
}
//关闭弹窗
function closeTips(){
_CalF.remove(_CalF.$(“popDiv”));
_CalF.remove(_CalF.$(“pop_boxDiv”));
}