web-dev-qa-db-fra.com

La position d'alerte Javascript n'est pas au centre dans chrome

Lorsque j'utilise une alerte javascript, elle se situe en haut du navigateur, pas au centre position dans la version actuelle de Chrome. Comment puis-je le contrôler et le rendre central avec javascript. Dans Firefox et IE, cela fonctionne très bien. Mon actuel chrome version 30.0.1599.66

Je souhaite positionner la boîte d'alerte au centre exact du navigateur pour tous les types de navigateurs et pour toutes les versions. S'il vous plaît aider ........

Toute autre idée simple sur l'alerte pour qu'elle soit centrée serait également appréciable ...

javascriptgoogle-chromealert
13
AtanuCSE

Dépendre des navigateurs pour les alertes n'est un bon choix pour personne. Ils changent rapidement et ne sont pas les mêmes pour différents navigateurs.

Ce que j'ai trouvé utile, c'est d'utiliser Alertify JS pour tous les besoins d'alerte. Vous pouvez le personnaliser selon vos besoins et il a l'air fabuleux de toute façon.

7
Vikram Tiwari

Puisqu'il s'agit d'une boîte par défaut, vous ne pouvez pas la positionner, bien que vous puissiez créer la vôtre et la positionner en conséquence .. essayez ceci http://jqueryui.com/dialog/

3
Manu

Vous souhaitez positionner la boîte de dialogue alert () au centre. Essayez ce 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(); });  };

Inclure Jquery et utiliser javascript:

alertMX('Hello!');
3
Carlos Sousa

Vous ne pouvez pas contrôler la façon dont le navigateur affiche l'alerte. Au lieu de cela, vous devez écrire votre propre fonction pour afficher div avec votre message. Cela pourrait être quelque chose comme ça:

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

Bien sûr, vous devriez y faire quelques calculs pour positionner correctement la div où vous le souhaitez. De plus, ce serait beaucoup plus facile si vous utilisez jQuery ou un autre framework js ...

[Modifier] Essayez quelque chose comme ça si vous voulez forcer le popup de JS. exemple contextuel

1
Tomasz Kapłoński