自定义JavaScript的alert()弹出框样式
JavaScript原始的alert()弹出框效果很差。
于是想着自定义这个原始alert()的显示样式。
JQuery方式实现代码如下：
<scripttype="text/javascript"src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<scripttype="text/javascript">
(function(){
window.alert=function(text){
//解析alert内容中的换行符
text=text.toString().replace(/\\/g,'\\').replace(/\n/g,'<br/>').replace(/\r/g,'<br/>');
//自定义DIV弹窗
varalertdiv='<divid="alertdiv"style="position:absolute;display:none;overflow:hidden;padding:10px10px8px;top:50%;left:50%;text-align:center;line-height:22px;background-color:#DDE4EE;border:1pxsolid#ccc">'+text+'<br/><inputtype="submit"name="button"id="button"value="确定"style="margin-top:8px;"onclick="$(this).parent().remove();"/></div>';
$(document.body).append(alertdiv);
//设置偏移数值，实现垂直和水平居中
$("#alertdiv").css({
"margin-left":$("#alertdiv").width()/2*(-1)-20,
"margin-top":$("#alertdiv").height()/2*(-1)-20
});
//显示
$("#alertdiv").show();
};
})();
</script>
<inputtype="submit"name="button"id="button"value="点击"onclick='alert("这是alert弹窗\n支持\\n换行符")'/>