php 手机弹出提示框,js弹框纯CSS打造，适合手机网页的提示

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 = “×”;

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”));

}