Jak edytować tytuł pola alertów JavaScript?

168

Generuję alert JavaScript z następującym kodem na stronie C # .NET:

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

Wyświetla okno alertu z tytułem nagłówka „Wiadomość ze strony internetowej”.

Czy można zmodyfikować tytuł?

javascript alert

— subash
źródło

Myślę, że pytanie dotyczyło JavaScript, który jest kompatybilny ze wszystkimi platformami i przeglądarkami, a nie VBScript, który jest ściśle związany z IE i Windows, więc jego użycie jest ograniczone tylko do Windows

— UserTursty

2

możliwy duplikat zmiany tytułu ostrzeżenia Javascript

— Sjoerd

2

Czy wiesz, że alerty mogą być bardzo łatwo wyłączone przez użytkownika? NIE powinieneś na nich polegać!

— toesslab

259

Nie, nie możesz.

To funkcja bezpieczeństwa / ochrony przed phishingiem.

— Pierreten
źródło

22

Chociaż jest to odpowiedź i faktycznie jest prawdą, ustaliłem, że możesz stworzyć własną wersję alertu i zrobi to, co chcesz. Prosty modalny i przesłaniający wywołanie funkcji alert.

— Fallenreaper,

1

W jaki sposób jest to funkcja zabezpieczająca / antyphishingowa? Jestem ciekawy, nie kłócę się.

— Tim

1

@Tim Przypuszczalnie byłoby łatwiej zasymulować inną witrynę internetową, gdyby Twoje alerty nie informowały użytkownika, z jakiego adresu URL pochodzą; odrzucenie tego dostosowania zmusza JavaScript do poinformowania użytkownika, że nie jest to uzasadniona wiadomość.

— Hydrotermalny

@Hydrothermal Tak z ciekawości, czy CSS nie może teraz symulować zachowania alertów, a jeśli tak, to czy zmiana tytułów alertów modalnych nadal stanowi duże zagrożenie?

— Josh

6

@Josh Możesz podejść blisko, wykonując dużo ciężkiej pracy, ale natywne alerty przeglądarki mają zachowanie, którego nie można zasymulować, takie jak zamrażanie reszty przeglądarki, unoszenie się nad interfejsem przeglądarki i działanie jako osobne okno, które można przeciągnąć poza ekran przeglądarki. Bardzo trudno jest stworzyć przekonującą replikę, zwłaszcza że alert każdej przeglądarki wygląda inaczej.

— Hydrotermalne

65

Nie, to niemożliwe. Możesz użyć niestandardowego pola ostrzegawczego javascript.

Znalazłem fajny przy użyciu jQuery

Okna dialogowe alertów jQuery (ostrzeżenie, potwierdzenie i monit o zastąpienie)

— rahul
źródło

4

Dziękuję, ale nie jestem zainteresowany używaniem niestandardowego okna alertów

— subash

20

Nawiasem mówiąc, nie możesz zmienić tytułu, aby zapobiec oszukaniu użytkownika przez złośliwe witryny internetowe, aby pomyślał, że alert pochodzi z ich systemu operacyjnego lub z czegoś innego.

— benzado

1

UWAGA: Inny użytkownik próbował edytować tę odpowiedź, aby wskazać, że podane łącze prowadzi do witryny, w której wykryto złośliwe oprogramowanie.

Bez obrazy, ale te alerty wyglądają bardzo brzydko. SweetAlert jest o wiele ładniejszy niż ten.

— shashwat

32

Możesz to zrobić w 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>

(Chociaż naprawdę żałuję, że nie możesz.)

— Chris Fulstow
źródło

53

Wszyscy życzymy tego samego

— rahul

@Chris Fulstow, co może być rozwiązaniem tego pytania

— Tom

1

Uwielbiam vbscript, chciałbym, żeby vbscript był znormalizowany wraz z javascript. w ten sposób mogę pisać bez zamieszania związanego z rozróżnianiem wielkości liter, a wszystkie popularne przeglądarki będą posłuszne moim poleceniom MWHAHAHA

— Ronnie Matthews

3

Wow komentarz ma więcej głosów niż odpowiedź ... za oddelegowanie części odpowiedzi

— Marvin Thobejane

11

Zastąp funkcję window.alert () javascript.

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

Dzięki temu możesz stworzyć własną alert()funkcję. Utwórz nowe, fajnie wyglądające okno dialogowe (z niektórych elementów div).

Przetestowano działanie w Chrome i Webkicie, nie jestem pewien innych.

— Derk Jochems
źródło

1

co jest someElementId? który tag mam na myśli?

— Pramod Setlur

1

someElementIdjest jakimkolwiek identyfikatorem, na jaki ustawiłeś swój element HTML.

— James P.,

11

Znalazłem ten Sweetalert w celu dostosowania javascript pola nagłówka.

Na przykład

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
źródło

1

Tak. SweeAlert jest jeszcze prostszy niż twój przykład, jeśli chcesz. Właśnie utworzyłem <link do skryptu do ich biblioteki i zastąpiłem słowo „alert” w moim kodzie i to było! Dziękuję Ci. Słodka rekomendacja!

— JustJohn

5

Aby odpowiedzieć na pytania dotyczące tego, jak to zadałeś.

To jest naprawdę NAPRAWDĘ łatwe (przynajmniej w Internet Explorerze), zrobiłem to w około 17,5 sekundy.

Jeśli używasz niestandardowego skryptu dostarczonego przez cxfx: (umieść go w swoim pliku apsx)

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

Możesz wtedy nazwać to tak samo, jak nazwałeś zwykły alert. Po prostu zmodyfikuj swój kod do następującego.

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

Mam nadzieję, że to pomoże tobie lub komuś innemu!

— kralco626
źródło

2

Działa dla mnie z IE, ale nie Firefox. Dzięki tak samo, szybko i nieprzyjemnie, ale może się przydać.

— Darth Continent

1

@ Darth. Yo I proly powinienem o tym wspomnieć. Używa VBScript. musisz wygooglować, jak uruchomić VBScript w przeglądarce Firefox.

— kralco626

2

@ Dath - PS Nie wiem, czy istnieje sposób na uruchomienie VBScript w przeglądarce Firefox. Stworzyłbym inny temat o nazwie coś w rodzaju, jak uruchomić ten skrypt vb w przeglądarce Firefox i opublikował kod, który ci podałem powyżej, i zobaczył, czy ktoś może coś wymyślić.

— kralco626

2

@Darth - Chociaż użyłbym rozwiązania Rahula. Po prostu użyj JQuery, to naprawdę proste!

— kralco626

3

Dwa głosy „przeciw”, jedno „za”… ale nie ma komentarzy na temat powodów, dla których jestem odrzucany… Myślę, że jest to poprawne rozwiązanie… przynajmniej w IE…: /

— kralco626

4

Jest tutaj całkiem niezły `` hack '' - https://stackoverflow.com/a/14565029 gdzie używasz iframe z pustym src do wygenerowania komunikatu ostrzegawczego / potwierdzenia - nie działa na Androidzie (ze względów bezpieczeństwa) - ale może pasować do twojego scenariusza.

— extraLRG
źródło

2

Możesz dokonać niewielkiej korekty, aby zostawić pustą linię u góry.

Lubię to.

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

— webzy
źródło

1

Tak, możesz to zmienić. jeśli wywołasz funkcję VBscript w JavaScript.

Oto prosty przykład

<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
źródło

1

@ManikandanSethuraju nie będzie działać na FF i GC, ponieważ nie obsługują VBScript.

— atsurti

1

Kiedy zaczynasz lub po prostu dołączasz do projektu opartego na aplikacjach internetowych, projekt interfejsu może być dobry. W przeciwnym razie należy to zmienić. W aplikacjach Web 2.0 będziesz pracować z dynamiczną zawartością, wieloma efektami i innymi rzeczami. Wszystkie te rzeczy są w porządku, ale nikt nie pomyślał o stylizowaniu okien alertów JavaScript i potwierdzeń. Oto sposób, w jaki… całkowicie dynamiczny, oparty na JS i CSS Stwórz prosty plik 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>

Następnie utwórz prostą nazwę pliku js jsConfirmStyle.js. Oto prosty kod js

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();

}

Możesz pobrać pełny kod źródłowy stąd

— Shafiqul Islam
źródło

1

czy możesz zrobić demu plz

— X-Coder

0

Miałem podobny problem, gdy chciałem zmienić tytuł pola i tytuł przycisku domyślnego pola potwierdzenia. Wybrałem wtyczkę dialogową Jquery Ui http://jqueryui.com/dialog/#modal-confirmation

Kiedy miałem:

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

Zmieniłem to na:

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

Można zobaczyć, jak pracuje tutaj https://jsfiddle.net/5aua4wss/2/

Mam nadzieję, że to pomoże.

— tylko ja
źródło