自定义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换行符")'/>热门推荐
10 新年门口花束祝福语简短
11 盘锦结婚祝福语大全简短
12 父母生日祝福语 简短独特
13 家庭恩爱祝福语简短英文
14 高考俄语祝福语大全简短
15 虎年祝福语 诗句唯美简短
16 生日婚礼祝福语简短精辟
17 虎年喝酒拜年祝福语简短
18 教师闺蜜祝福语简短