Positionnement du popup de la fenêtre contextuelle en javascript

Question

Je dispose d'une invite JavaScript comme celle-ci et je souhaite centrer l'invite au milieu de l'écran. Comment faire cela en utilisant JavaScript?

function showUpdate() {     
    var x;    
    var name=prompt("Veuillez entrer votre nom","");

    if ( name != null ) {
      x="Bonjour " + name + "! Comment ça va aujourd'hui?";
      alert("Entrée : " + name );          
    }

}

Et voici comment j'appelle ceci :

5. Commentaires manqués

Ça fonctionne bien sauf que l'invite se déplace vers le coin gauche dans IE et au centre dans Firefox mais j'ai besoin que la même solution fonctionne dans les deux navigateurs.

Answer 1

Les popups prompt (et alert) sont implémentées différemment en fonction du navigateur que vous utilisez. Cela est dû au fait que les popups sont des fonctionnalités du navigateur, elles ne sont pas des objets JavaScript ou autre. (Tout comme la console est différente pour chaque navigateur, cela dépend de l'implémentation.)

Si vous voulez vraiment que vos prompts soient positionnés / stylés de manière cohérente, vous allez devoir construire votre propre prompt.

La solution facile serait d'utiliser une bibliothèque comme jQueryUI.

En revanche, vous pouvez le construire vous-même :

document.getElementById('showPromptButton').addEventListener('click', showSprompt);
document.getElementById('promptButton').addEventListener('click', submitPrompt);
var prompt = document.getElementById('myPrompt');
var promptAnswer = document.getElementById('promptAnswer');

function showSprompt() {
    promptAnswer.value = ''; // Réinitialiser la réponse du prompt
    document.getElementById('promptQuestion').innerText = "Quelle est votre question ?"; // Définir la question du prompt
    prompt.style.display = 'block'; // Afficher le prompt
}

function submitPrompt() {
    var answer = promptAnswer.value; // Obtenir la réponse
    prompt.style.display = 'none';   // Cacher le prompt
    console.log(answer);
}

#myPrompt{
  display:none;
  /* Stylisez votre prompt ici. */
}

Answer 2

Vous ne pouvez pas personnaliser ou positionner la boîte de dialogue JavaScript par défaut. Consultez cette réponse SO pour des solutions de contournement.

Comment personnaliser la boîte de dialogue JavaScript?

Answer 3

... mais j'ai besoin de la même solution pour fonctionner dans les deux navigateurs.

prompt (et son cousin alert) sont très dépassés. Vous n'avez aucun contrôle sur leur apparence ou position. Il vaut mieux les éviter.

A la place, vous pouvez afficher un message popup en utilisant un div positionné absolument (ou tout autre élément de bloc), ce qui vous donne un contrôle total sur sa position, ainsi que sur son style. Si vous regardez autour de vous, vous trouverez des dizaines d'exemples pour le faire, et des boîtes à outils pour cela, il n'est pas nécessaire de créer le vôtre à moins que vous ne le vouliez vraiment.

Peu importe la façon dont vous le faites finalement, votre logique d'utilisation devra changer, car prompt est synchrone (tous les scripts de la page s'arrêtent et attendent que le prompt soit complété), alors que les façons modernes de le faire sont asynchrones (basées sur les événements). Ainsi, par exemple, votre nouveau code pour utiliser le popup pourrait ressembler à ceci :

function showUpdate() {

    popup("Veuillez entrer votre nom","", function(name) {
        if (name!=null)
        {
            x="Bonjour " + name + "! Comment vas-tu aujourd'hui?";
            alert("Input : "+name); // <== J'ai laissé celui-ci seul, il semble être pour le débogage
        }
    });
}

Answer 4

Les invitations, alertes et confirmations sont des fonctions de base que chaque navigateur affiche à sa manière à l'utilisateur. Il n'y a vraiment aucune raison pour que vous souhaitiez personnaliser ces fonctions, d'ailleurs.

Si vous voulez vraiment une fonctionnalité avancée et une personnalisation complète, vous devrez créer votre propre alerte personnalisée. Vous pouvez le faire de plusieurs manières. Une des deux options que je vous suggère est de créer deux divs (l'un qui atténue le reste de la page et l'autre qui apparaît comme une alerte) en Javascript et les utiliser comme une pseudo-invitation. La deuxième consiste à créer une nouvelle fenêtre, en retirant une grande partie de sa fonctionnalité et en modifiant un peu le HTML de la page nouvellement ouverte pour la faire ressembler à une alerte.

Je trouve cependant que la dernière option est vraiment exagérée. Si vous voulez une invitation, elles sont laides... Sinon, vous devrez créer quelque chose vous-même avec une div positionnée et un fond atténué.

Answer 5

REMARQUE : La méthode window.showModalDialog() est obsolète et n'est pas prise en charge par les navigateurs modernes. Veuillez ne pas l'utiliser.

Vous ne pouvez pas repositionner window.alert(), mais vous pouvez le faire avec window.showModalDialog() comme décrit dans cette page : http://bytes.com/topic/javascript/answers/849283-change-position-alert-possible

https://developer.mozilla.org/en-US/docs/DOM/window.showModalDialog