Changer la façon dont une JavaScript Alert() ou de l'Invite() recherche

Est-il possible de modifier l'apparence d'un alerte ou invite en JavaScript? Des choses comme l'ajout d'une image, en changeant la couleur de la police ou de la taille, et ce qui te permettra de donner un aspect différent.

double possible de alerte Personnalisée à l'aide de Javascript
AussiJavascript - Changement de l'Icône d'Alerte (même réponse bien 🙂
C'est légèrement différent. Les questions que vous avez posté, se rapportent plus à la façon de la alert est livré, plutôt que son style ressemble.

OriginalL'auteur | 2011-08-14

  1. 4

    Expansion sur Matthew Abbott idée, il m'a frappé que vous voulez une réponse qui utilise un bon vieux Javascript sans avoir recours à des cadres. Voici un moyen rapide et sale de la page qui émet un div avec un simple bouton et le message présenté dans le centre:

    Rugueux CSS pour l'alertBox et la alertClose bouton

    #alertBox{
    position:absolute;
    top:100px;
    left:100px;
    border:solid 1px black;
    background-color: #528CE0;
    padding: 50px;
    visibility: hidden;
}
#alertClose{
    position: absolute;
    right:0;
    top: 0;
    background-color: black;
    border: solid 1px white;
    color: white;
    width: 1em;
    text-align: center; 
    cursor: pointer;
}

    Puis un peu de javascript pour remplacer le construit en fonction d'alerte et de fournir une clôture fonction pour gérer l'événement click sur alertClose.

    function closeAlertBox(){
    alertBox = document.getElementById("alertBox");
    alertClose = document.getElementById("alertClose");
    alertBox.style.visibility = "hidden";
    alertClose.style.visibility = "hidden";
}
window.alert = function(msg){
    var id = "alertBox", alertBox, closeId = "alertClose", alertClose;
    alertBox = document.createElement("div");
    document.body.appendChild(alertBox);
    alertBox.id = id;
    alertBox.innerHTML = msg;
    alertClose = document.createElement("div");
    alertClose.id = closeId;
    alertClose.innerHTML = "x";
    alertBox.appendChild(alertClose);
    alertBox.style.visibility = "visible";
    alertClose.style.visibility = "visible";
    alertClose.onclick = closeAlertBox;
};

    Appel alert, comme Matthew Abbott a suggéré, maintenant affiche le div que vous venez de créer et cliquez sur le x rejette en le rendant invisible.

    alert("hello from the dummy alert box.");

    À mettre en œuvre, vous aurez besoin d'avoir un test dans la fonction d'alerte pour s'assurer que vous n'êtes pas re-création de la div d'un million de fois et vous auriez besoin de déconner avec le CSS pour l'adapter à votre schéma de couleurs etc, mais c'est la forme grossière de la façon de mettre en œuvre votre propre boîte d'alerte.

    Semble exagéré pour moi et je suis d'accord avec Matthieu, que de faire un certain type de dialogue ou modale créé avec un célèbre framework comme jQuery ou YUI serait mieux et étrangement plus facile dans le long terme.

    OriginalL'auteur DavidHyogo

  2. 0

    La alert et prompt fonctions d'appeler les Api fournies par le navigateur, de sorte que vous n'aurez aucun contrôle sur la façon dont ils regardent.

    Ce que vous pourrait faire est de redéfinir ces fonctions, et peut-être au lieu d'utiliser quelque chose comme jQuery modal, par exemple:

    window.alert = function(message) {
    //Launch jQuery modal here..
};

window.prompt = function(message) {
    //Launch jQuery modal here..
};

    OriginalL'auteur Matthew Abbott

  3. 0

    Vous ne pouvez pas le modifier, mais vous pouvez utiliser quelque chose comme showModalDialog, il a juste besoin d'un URI pour charger le hmtl/css forme que vous voulez (si vous pouvez le garder dans une page séparée).

    OriginalL'auteur Eliu