¿Cómo editar un título de cuadro de alerta de JavaScript?

168

Estoy generando una alerta de JavaScript con el siguiente código en la página de C # .NET:

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

Muestra un cuadro de alerta con el título del título como "Mensaje de la página web".

¿Es posible modificar el título?

javascript alert subash
fuente

Creo que la pregunta era JavaScript que es compatible con todas las plataformas y navegadores y no para VBScript que es una cosa estrictamente IE y Windows por lo que su uso está limitado a sólo Windows

UserTursty

2

posible duplicado de Cambiar Título de Alerta Javascript

Sjoerd

2

¿Sabes que el usuario puede desactivar fácilmente las alertas? ¡NO deberías confiar en eso!

toesslab

259

No puedes.

Es una función de seguridad / anti-phishing.

Pierreten
fuente

22

Si bien esta es una respuesta y es REALMENTE cierto, he determinado que puedes hacer tu propia versión de alerta y hará lo que quieras. Un modal simple y anular la llamada de función de alerta.

Fallenreaper

1

¿Cómo es esto una característica de seguridad / anti-phishing? Tengo curiosidad, no discutiendo.

Tim

1

@Tim Presumiblemente, sería más fácil simular otro sitio web si sus alertas no le dijeran al usuario de qué URL se originaban; no permitir esta personalización obliga a JavaScript a decirle al usuario que no es un mensaje legítimo.

Hidrotermal

@Hydrothermal Solo por curiosidad, ¿CSS no puede simular el comportamiento de alerta ahora? De ser así, ¿sigue siendo una gran amenaza permitirle cambiar los títulos de alerta modal?

Josh

66

@ Josh Podría acercarse con mucho trabajo duro, pero las alertas nativas del navegador tienen un comportamiento que no se puede simular, como congelar el resto del navegador, flotar sobre la interfaz de usuario del navegador y funcionar como una ventana separada que se puede arrastrar fuera de la pantalla del navegador. Es muy difícil crear una réplica convincente, especialmente porque la alerta de cada navegador se ve diferente.

Hidrotermal

65

No, no es posible. Puede usar un cuadro de alerta de JavaScript personalizado.

Encontré uno agradable usando jQuery

Diálogos de alerta de jQuery (alertas, confirmación y reemplazos rápidos)

rahul
fuente

44

U gracias, pero no estoy interesado en utilizar cuadro de alerta personalizada

subash

20

La razón por la que no puede cambiar el título, por cierto, es para evitar que los sitios web maliciosos engañen al usuario haciéndole creer que la alerta proviene de su sistema operativo u otra cosa.

benzado

1

NOTA: Otro usuario ha intentado editar esta respuesta para indicar que el enlace proporcionado condujo a un sitio donde se detectó malware.

Sin ofender, pero esas alertas se ven muy feas. SweetAlert es mucho más bonita que esto.

shashwat

32

Puedes hacer esto en 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>

(Aunque, realmente desearía que no pudieras).

Chris Fulstow
fuente

53

Todos deseamos lo mismo

rahul

@ Chris Fulstow lo que puede ser una solución a esta pregunta

Tom

1

Me encanta vbscript, desearía que vbscript se estandarizara junto con javascript. de esa manera puedo escribir sin la confusión de mayúsculas y minúsculas, y todos los navegadores populares obedecerían mis comandos MWHAHAHA

Ronnie Matthews

3

Wow, un comentario tiene más votos que la respuesta ... por apoyar una parte de la respuesta

Marvin Thobejane

11

Anule la función javascript window.alert ().

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

Con esto puedes crear tu propia alert()función. Cree un nuevo diálogo de aspecto 'genial' (a partir de algunos elementos div).

Probado trabajando en Chrome y webkit, no estoy seguro de los demás.

Derk Jochems
fuente

1

lo que es someElementId? ¿a qué etiqueta me refiero?

Pramod Setlur

1

someElementIdes cualquier ID que haya configurado como elemento HTML.

James P.

11

Encontré este Sweetalert para personalizar el cuadro de encabezado javascript.

Por ejemplo

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

Abed Putra
fuente

1

Si. SweeAlert es aún más simple que tu ejemplo si quieres. ¡Acabo de hacer un <script link a su biblioteca y reemplacé la palabra "alert" en mi código y ahí estaba! Gracias. Dulce recomendación!

JustJohn

5

Para responder las preguntas en términos de cómo lo hizo.

Esto es REALMENTE fácil (al menos en Internet Explorer), lo hice en 17.5 segundos.

Si usa el script personalizado que cxfx proporcionó: (colóquelo en su archivo apsx)

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

Luego puede llamarlo igual que llamó a la alerta regular. Simplemente modifique su código a lo siguiente.

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

Espero que te ayude, o alguien más!

kralco626
fuente

2

Funciona para mí con IE, pero no con Firefox. Gracias de todos modos, rápido y sucio, pero podría resultar útil.

Darth Continent

1

@ Darth. Yo, proly, debería haber mencionado eso. Está usando VBScript. Tienes que buscar en Google cómo hacer que VBScript se ejecute en Firefox.

kralco626 22/10/10

2

@ Dath - PD No sé si hay una manera de ejecutar posiblemente VBScript en Firefox. Crearía otro tema llamado algo así como cómo ejecutar este script vb en firefox y publicar el código que le di arriba y ver si alguien puede llegar a algo.

kralco626 22/10/10

2

@Darth - Aunque usaría la solución de Rahul. Solo use un poco de JQuery, ¡es realmente fácil!

kralco626 22/10/10

3

Dos votos a favor, uno a favor ... pero no hay comentarios para decir por qué me votan a favor ... Creo que esta es una solución válida ... al menos en IE ...: /

kralco626

4

Aquí hay un 'truco' bastante agradable: https://stackoverflow.com/a/14565029 donde usas un iframe con un src vacío para generar el mensaje de alerta / confirmación; no funciona en Android (por seguridad) pero puede adaptarse a su escenario.

extraLRG
fuente

2

Puede hacer un pequeño ajuste para dejar una línea en blanco en la parte superior.

Me gusta esto.

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

webzy
fuente

1

Sí, puedes cambiarlo. si llama a la función VBscript dentro de Javascript.

Aquí hay un ejemplo 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>

Saeed
fuente

1

@ManikandanSethuraju no funcionará en FF y GC, ya que no son compatibles con VBScript.

atsurti

1

Cuando inicia o simplemente se une a un proyecto basado en aplicaciones web, el diseño de la interfaz puede ser bueno. De lo contrario, esto debería cambiarse. Para las aplicaciones Web 2.0, trabajará con contenidos dinámicos, muchos efectos y otras cosas. Todas estas cosas están bien, pero nadie pensó en diseñar la alerta de JavaScript y confirmar los cuadros. Aquí está el camino, .. completamente dinámico, JS y CSS impulsado Crear un archivo 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>

Luego cree un nombre de archivo js simple jsConfirmStyle.js. Aquí hay un código 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();

}

Puede descargar el código fuente completo desde aquí

Shafiqul Islam
fuente

1

puedes hacer una demu plz

X-Coder

0

Tuve un problema similar cuando quise cambiar el título del cuadro y el título del botón del cuadro de confirmación predeterminado. He optado por el complemento de diálogo de Jquery Ui http://jqueryui.com/dialog/#modal-confirmation

Cuando tuve lo siguiente:

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

Lo he cambiado a:

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');
}

Se puede ver trabajando aquí https://jsfiddle.net/5aua4wss/2/

Espero que ayude.

solo yo
fuente

¿Cómo editar un título de cuadro de alerta de JavaScript?

Respuestas: