web-dev-qa-db-fra.com

Comment éditer un titre de boîte d'alerte JavaScript?

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 un message d’alerte dont le titre est intitulé "Message de la page Web".

Est-il possible de modifier le titre?

javascriptalert
162
subash

Non, tu ne peux pas.

C'est une fonctionnalité de sécurité/anti-phishing.

243
Pierreten

Non ce n'est pas possible. Vous pouvez utiliser une zone d’alerte javascript personnalisée.

Trouvé un joli en utilisant jQuery

Dialogues d'alerte jQuery (remplacements d'alerte, de confirmation et d'invite)

65
rahul

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.)

31
Chris Fulstow

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 fonction alert(). Créez un nouveau dialogue "cool" (à partir de certains éléments div).

Testé en travaillant dans chrome et webkit, pas sûr des autres.

11
Derk Jochems

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

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");
});
9
Abed Putra

Pour répondre aux questions en termes de comment vous l'avez demandé.

C’est vraiment très facile (au moins dans Internet Explorer), 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 alors l'appeler comme vous avez appelé l'alerte régulière. 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!

4
kralco626

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

4
extraLRG

Vous pouvez faire un petit ajustement pour laisser une ligne blanche 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>
2
webzy

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 utiliserez des contenus dynamiques, de nombreux effets et d’autres éléments. Toutes ces choses vont bien, mais personne n'a pensé à mettre en forme l'alerte JavaScript et à confirmer les cases. Voici le chemin à suivre, .. complètement dynamique, basé sur JS et CSS Créez un fichier html simple

<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>

Créez ensuite un simple nom de fichier js, jsConfirmStyle.js. Voici le 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 à partir d'ici

1
Shafiqul Islam

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
Saeed

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 choisi 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é pour:

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 ça t'as aidé.

0
justMe