CODEWITHSUNDEEP
javascriptgoogle-chromealert
AtanuCSE
AtanuCSE

Reputation: 8940

Javascript alert position not in center in chrome

When I'm using an javascript alert it's going on top of the browser, not in center position in current version of chrome. How can I control it, and make it center with javascript. In firefox and IE,it's working just fine. My current chrome version 30.0.1599.66

I want to position the alert box in exact center of the browser for all type of browsers and for all versions. Please help........

Any other simple idea on providing alert so that it could be centered, would also be appreciable...

Upvotes: 17

Views: 66934

Answers (4)

Carlos Sousa
Carlos Sousa

Reputation: 41

You want alert() dialog position in center. Try this simple script.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(); });  };

Include Jquery and use javascript:

alertMX('Hello!');

Upvotes: 3

Tomasz Kapłoński
Tomasz Kapłoński

Reputation: 1378

You cannot control the way browser display alert. Instead, you should write your own function to display div with your message. It could be something like that:

function customAlert(msg) {
var alertDiv = "<div style='position: fixed; top: 20px; left: 20px;'>"+msg+"</div>";
document.getElementsByTagName('body')[0].appendChild(alertDiv);
}

Ofcourse you should do some calculation there to properly position the div where you want. Also it would be much easier if you use jQuery or some other js framework...

[Edit] Try something like that if you want to force popup from JS. Popup example

Upvotes: 1

Manu
Manu

Reputation: 418

Since it is a default box, u cannot position it, though u can create your own and position it accordingly.. try this http://jqueryui.com/dialog/

Upvotes: 3

Vikram Tiwari
Vikram Tiwari

Reputation: 3895

Being dependent upon the browsers for the alerts is not a good choice for any. They change rapidly and are not the same for different browsers.

What i have found useful is to use Alertify JS for all the alert needs. You can customize it for your needs and it looks fabulous anyway.

Upvotes: 7

Related Questions