Comment modifier le titre d'une boîte d'alerte JavaScript?


168

Je génère une alerte JavaScript avec le code suivant dans la page C # .NET:

Response.Write("<script language=JavaScript> alert('Hi select a valid date'); </script>");

Il affiche une boîte d'alerte avec le titre de l'en-tête comme "Message de la page Web".

Est-il possible de modifier le titre?


Je pense que la question était pour JavaScript qui est compatible avec toutes les plates-formes et tous les navigateurs et non pour VBScript qui est strictement IE et Windows, donc son utilisation est limitée à Windows uniquement
UserTursty


2
Savez-vous que les alertes peuvent être très facilement désactivées par l'utilisateur? Vous ne devriez PAS vous fier à ceux-là!
toesslab

Réponses:


259

Non, tu ne peux pas.

C'est une fonction de sécurité / anti-hameçonnage.


22
Bien que ce soit une réponse et que ce soit EN FAIT vrai, j'ai décidé que vous pouvez créer votre propre version d'alerte et qu'elle fera ce que vous voulez. Un simple modal et remplace l'appel de la fonction d'alerte.
Fallenreaper

1
En quoi est-ce une fonction de sécurité / anti-hameçonnage? Je suis curieux, je ne discute pas.
Tim

1
@Tim Vraisemblablement, il serait plus facile de simuler un autre site Web si vos alertes n'indiquaient pas à l'utilisateur de quelle URL elles provenaient; interdire cette personnalisation force JavaScript à indiquer à l'utilisateur qu'il ne s'agit pas d'un message légitime.
Hydrothermal

@Hydrothermal Juste par curiosité, le comportement d'alerte ne peut-il pas être simulé par CSS maintenant et si oui, est-ce toujours une grande menace de vous permettre de changer les titres d'alerte modale?
Josh

6
@Josh Vous pourriez vous rapprocher avec beaucoup de travail acharné, mais les alertes de navigateur natives ont un comportement qui ne peut pas être simulé, comme le gel du reste du navigateur, flottant au-dessus de l'interface utilisateur du navigateur et fonctionnant comme une fenêtre séparée qui peut être déplacé hors de l'écran du navigateur. Il est très difficile de créer une réplique convaincante, d'autant plus que l'alerte de chaque navigateur est différente.
hydrothermale

65

Non ce n'est pas possible. Vous pouvez utiliser une boîte d'alerte javascript personnalisée.

J'ai trouvé un joli en utilisant jQuery

Boîtes de dialogue d'alerte jQuery (Alerte, Confirmation et Invite de remplacement)


4
Merci, mais je ne suis pas intéressé par l'utilisation de la boîte d'alerte personnalisée
subash

20
La raison pour laquelle vous ne pouvez pas modifier le titre, en passant, est d'empêcher les sites Web malveillants de tromper l'utilisateur en lui faisant croire que l'alerte provient de son système d'exploitation ou de quelque chose d'autre.
benzado

1
REMARQUE: un autre utilisateur a tenté de modifier cette réponse pour indiquer que le lien fourni menait à un site sur lequel un logiciel malveillant a été détecté.

Aucune offense, mais ces alertes semblent très laides. SweetAlert est bien plus joli que ça.
shashwat

32

Vous pouvez le faire dans IE:

<script language="VBScript">
Sub myAlert(title, content)
      MsgBox content, 0, title
End Sub
</script>

<script type="text/javascript">
myAlert("My custom title", "Some content");
</script>

(Bien que je souhaite vraiment que vous ne puissiez pas.)


53
Nous souhaitons tous la même chose
rahul

@Chris Fulstow quelle peut être une solution à cette question
Tom

1
J'adore vbscript, je souhaite que vbscript soit standardisé avec javascript. de cette façon, je peux script sans la confusion de la sensibilité à la casse, et tous les navigateurs populaires obéiraient à mes commandes MWHAHAHA
Ronnie Matthews

3
Wow, un commentaire a plus de votes que la réponse ... pour appuyer une partie de la réponse
Marvin Thobejane

11

Remplacez la fonction javascript window.alert ().

window.alert = function(title, message){
    var myElementToShow = document.getElementById("someElementId");
    myElementToShow.innerHTML = title + "</br>" + message; 
}

Avec cela, vous pouvez créer votre propre alert()fonction. Créez une nouvelle boîte de dialogue d'apparence «cool» (à partir de certains éléments div).

Testé fonctionnant dans Chrome et Webkit, pas sûr des autres.


1
qu'est ce que c'est someElementId? quelle balise je veux dire?
Pramod Setlur

1
someElementIdest l'ID que vous avez défini pour votre élément HTML.
James P.

11

J'ai trouvé ce Sweetalert pour personnaliser la boîte d'en-tête javascript.

Par exemple

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

1
Ouais. SweeAlert est encore plus simple que votre exemple si vous le souhaitez. Je viens de créer un lien <script vers leur bibliothèque et j'ai remplacé le mot "alert" dans mon code et c'était là! Je vous remercie. Douce recommandation!
JustJohn

5

Pour répondre aux questions en fonction de la façon dont vous l'avez posée.

C'est en fait VRAIMENT facile (dans Internet Explorer, au moins), je l'ai fait en 17,5 secondes.

Si vous utilisez le script personnalisé fourni par cxfx: (placez-le dans votre fichier apsx)

<script language="VBScript">
Sub myAlert(title, content)
MsgBox content, 0, title 
End Sub 
</script>

Vous pouvez ensuite l'appeler comme vous avez appelé l'alerte normale. Modifiez simplement votre code comme suit.

Response.Write("<script language=JavaScript> myAlert('Message Header Here','Hi select a valid date'); </script>");

J'espère que cela vous aide, ou quelqu'un d'autre!


2
Fonctionne pour moi avec IE, mais pas Firefox. Merci tout de même, rapide et sale mais pourrait s'avérer utile.
Darth Continent

1
@ Dark. Yo, j'aurais probablement dû le mentionner. Il utilise VBScript. vous devez google comment faire fonctionner VBScript dans Firefox.
kralco626

2
@ Dath - PS Je ne sais pas s'il existe un moyen d'exécuter éventuellement VBScript sur Firefox. Je créerais un autre sujet appelé quelque chose comme comment exécuter ce script vb dans Firefox et publier le code que je vous ai donné ci-dessus et voir si quelqu'un peut trouver quelque chose.
kralco626

2
@Darth - Même si j'utiliserais la solution de Rahul. Utilisez juste un peu de JQuery, c'est vraiment facile!
kralco626

3
Deux votes négatifs, un vote positif ... mais aucun commentaire pour dire pourquoi je suis downvote ... Je pense que c'est une solution valable ... au moins dans IE ...: /
kralco626

4

Il y a un bon `` hack '' ici - https://stackoverflow.com/a/14565029 où vous utilisez un iframe avec un src vide pour générer le message d'alerte / de confirmation - cela ne fonctionne pas sur Android (pour des raisons de sécurité) - mais peut convenir à votre scénario.


2

Vous pouvez faire un petit ajustement pour laisser une ligne vide en haut.

Comme ça.

        <script type="text/javascript" >
            alert("USER NOTICE "  +"\n"
            +"\n"
            +"New users are not allowed to work " +"\n"
            +"with that feature.");
        </script>

1

Oui, vous pouvez le changer. si vous appelez la fonction VBscript dans Javascript.

Voici un exemple simple

<script>

function alert_confirm(){

      customMsgBox("This is my title","how are you?",64,0,0,0);
}

</script>


<script language="VBScript">

Function customMsgBox(tit,mess,icon,buts,defs,mode)
   butVal = icon + buts + defs + mode
   customMsgBox= MsgBox(mess,butVal,tit)
End Function

</script>

<html>

<body>
<a href="javascript:alert_confirm()">Alert</a>
</body>

</html>

1
@ManikandanSethuraju cela ne fonctionnera pas sur FF et GC car ils ne supportent pas VBScript.
atsurti

1

Lorsque vous démarrez ou rejoignez simplement un projet basé sur des applications Web, la conception de l'interface est peut-être bonne. Sinon, cela devrait être changé. Pour les applications Web 2.0, vous travaillerez avec des contenus dynamiques, de nombreux effets et autres. Toutes ces choses vont bien, mais personne n'a pensé à styliser l'alerte JavaScript et à confirmer les cases. Voici comment ils sont, .. complètement dynamique, piloté par JS et CSS Créer un simple fichier html

<html>
 <head>
   <title>jsConfirmSyle</title>
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript" src="jsConfirmStyle.js"></script>
    <script type="text/javascript">

      function confirmation() {
       var answer = confirm("Wanna visit google?")
       if (answer){
       window.location = "http://www.google.com/";
       }
     }    

    </script>
    <style type="text/css">
     body {
      background-color: white;
      font-family: sans-serif;
      }
    #jsconfirm {
      border-color: #c0c0c0;
      border-width: 2px 4px 4px 2px;
      left: 0;
     margin: 0;
     padding: 0;
     position: absolute;
    top: -1000px;
    z-index: 100;
   }

  #jsconfirm table {
   background-color: #fff;
   border: 2px groove #c0c0c0;
   height: 150px;
   width: 300px;
  }

   #jsconfirmtitle {
  background-color: #B0B0B0;
  font-weight: bold;
  height: 20px;
  text-align: center;
}

 #jsconfirmbuttons {
height: 50px;
text-align: center;
 }

#jsconfirmbuttons input {
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
}

#jsconfirmleft{
background-image: url(left.png);
}

#jsconfirmright{
background-image: url(right.png);
 }
 < /style>
  </head>
 <body>
<p><br />
<a href="#"
onclick="javascript:showConfirm('Please confirm','Are you really really sure to visit    google?','Yes','http://www.google.com','No','#')">JsConfirmStyled</a></p>
<p><a href="#" onclick="confirmation()">standard</a></p>

</body>
</html>

Ensuite, créez un simple nom de fichier js jsConfirmStyle.js. Voici du code js simple

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

 xConfirmStart=800;
 yConfirmStart=100;

  if(ie5||nn6) {
  if(ie5) cs=2,th=30;
  else cs=0,th=20;
   document.write(
    "<div id='jsconfirm'>"+
        "<table>"+
            "<tr><td id='jsconfirmtitle'></td></tr>"+
            "<tr><td id='jsconfirmcontent'></td></tr>"+
            "<tr><td id='jsconfirmbuttons'>"+
                "<input id='jsconfirmleft' type='button' value='' onclick='leftJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
                "&nbsp;&nbsp;"+
                "<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
            "</td></tr>"+
        "</table>"+
    "</div>"
  );
   }

 document.write("<div id='jsconfirmfade'></div>");


 function leftJsConfirm() {
  document.getElementById('jsconfirm').style.top=-1000;
  document.location.href=leftJsConfirmUri;
 }
function rightJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=rightJsConfirmUri;
 }
function confirmAlternative() {
if(confirm("Scipt requieres a better browser!"))       document.location.href="http://www.mozilla.org";
}

leftJsConfirmUri = '';
rightJsConfirmUri = '';

  /**
   * Show the message/confirm box
  */
    function       showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,con      firmrighturi)  {
document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
document.getElementById("jsconfirmleft").value=confirmlefttext;
document.getElementById("jsconfirmright").value=confirmrighttext;
leftJsConfirmUri=confirmlefturi;
rightJsConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5) {
    document.getElementById("jsconfirm").style.left='25%';
    document.getElementById("jsconfirm").style.top='35%';
}
else if(nn6) {
    document.getElementById("jsconfirm").style.top='25%';
    document.getElementById("jsconfirm").style.left='35%';
}
else confirmAlternative();

}

Vous pouvez télécharger le code source complet ici


1
pouvez-vous faire une demu plz
X-Coder

0

J'ai eu un problème similaire lorsque je voulais changer le titre de la boîte et le titre du bouton de la boîte de confirmation par défaut. J'ai opté pour le plugin de dialogue Jquery Ui http://jqueryui.com/dialog/#modal-confirmation

Quand j'ai eu ce qui suit:

function testConfirm() {
  if (confirm("Are you sure you want to delete?")) {
    //some stuff
  }
}

Je l'ai changé en:

function testConfirm() {

  var $dialog = $('<div></div>')
    .html("Are you sure you want to delete?")
    .dialog({
      resizable: false,
      title: "Confirm Deletion",
      modal: true,
      buttons: {
        Cancel: function() {
          $(this).dialog("close");
        },
        "Delete": function() {
          //some stuff
          $(this).dialog("close");
        }
      }
    });

  $dialog.dialog('open');
}

Peut être vu travailler ici https://jsfiddle.net/5aua4wss/2/

J'espère que cela pourra aider.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.