当我使用JavaScript警报时,它会出现在浏览器顶部,而不是中央位置。如何控制并使用JavaScript使其居中?在Firefox和IE中,它运行得非常好。我的当前Chrome版本为30.0.1599.66。
我想将警报框定位在浏览器的确切中心,适用于所有类型的浏览器和所有版本。请帮帮我......
如果有其他简单的提供居中提示的想法,也会受到赞赏...
当我使用JavaScript警报时,它会出现在浏览器顶部,而不是中央位置。如何控制并使用JavaScript使其居中?在Firefox和IE中,它运行得非常好。我的当前Chrome版本为30.0.1599.66。
我想将警报框定位在浏览器的确切中心,适用于所有类型的浏览器和所有版本。请帮帮我......
如果有其他简单的提供居中提示的想法,也会受到赞赏...
仅依赖浏览器的警告信息并不是一个好选择,因为它们变化很快,并且在不同的浏览器中可能不一样。
我发现使用Alertify JS可以满足所有提示需求,您可以根据自己的需要进行定制,效果很棒。
// alertMX - improve alert()
$("<style type='text/css'>#boxMX{display:none;background: #333;padding: 10px;border: 2px solid #ddd;float: left;font-size: 1.2em;position: fixed;top: 50%; left: 50%;z-index: 99999;box-shadow: 0px 0px 20px #999; -moz-box-shadow: 0px 0px 20px #999; -webkit-box-shadow: 0px 0px 20px #999; border-radius:6px 6px 6px 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; font:13px Arial, Helvetica, sans-serif; padding:6px 6px 4px;width:300px; color: white;}</style>").appendTo("head");
function alertMX(t){
$( "body" ).append( $( "<div id='boxMX'><p class='msgMX'></p><p>CLOSE</p></div>" ) );
$('.msgMX').text(t); var popMargTop = ($('#boxMX').height() + 24) / 2, popMargLeft = ($('#boxMX').width() + 24) / 2;
$('#boxMX').css({ 'margin-top' : -popMargTop,'margin-left' : -popMargLeft}).fadeIn(600);
$("#boxMX").click(function() { $(this).remove(); }); };
引入Jquery并使用JavaScript:
alertMX('Hello!');
你无法控制浏览器如何显示警告框。相反,你应该编写自己的函数来显示带有消息的div。它可能是这样的:
function customAlert(msg) {
var alertDiv = "<div style='position: fixed; top: 20px; left: 20px;'>"+msg+"</div>";
document.getElementsByTagName('body')[0].appendChild(alertDiv);
}