Как изменить заголовок alert - Исправление ошибок и поиск оптимальных решений проблем

I’m generating a JavaScript alert with following code in C# .NET page:

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

It displays an alert box with the heading title as «Message from webpage».

Is it possible to modify the title?

Quentin

893k122 gold badges1194 silver badges1315 bronze badges

asked Dec 15, 2009 at 5:09

No, you can’t.

It’s a security/anti-phishing feature.

user229044♦

229k40 gold badges329 silver badges336 bronze badges

answered Dec 15, 2009 at 5:27

PierretenPierreten

9,7996 gold badges37 silver badges45 bronze badges

You can do this in 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>

(Although, I really wish you couldn’t.)

answered Dec 15, 2009 at 5:24

Chris FulstowChris Fulstow

40.7k10 gold badges86 silver badges109 bronze badges

I Found this Sweetalert for customize header box javascript.

For example

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

answered Jul 27, 2016 at 7:32

Abed PutraAbed Putra

1,0732 gold badges19 silver badges36 bronze badges

Override the javascript window.alert() function.

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

With this you can create your own alert() function. Create a new ‘cool’ looking dialog (from some div elements).

Tested working in chrome and webkit, not sure of others.

answered Nov 16, 2012 at 6:56

To answer the questions in terms of how you asked it.

This is actually REALLY easy (in Internet Explorer, at least), i did it in like 17.5 seconds.

If you use the custom script that cxfx provided: (place it in your apsx file)

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

You can then call it just like you called the regular alert. Just modify your code to the following.

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

Hope that helps you, or someone else!

Paul D. Waite

95.6k55 gold badges198 silver badges267 bronze badges

answered Jul 9, 2010 at 14:08

kralco626kralco626

8,33637 gold badges110 silver badges168 bronze badges

There’s quite a nice ‘hack’ here — https://stackoverflow.com/a/14565029 where you use an iframe with an empty src to generate the alert / confirm message — it doesn’t work on Android (for security’s sake) — but may suit your scenario.

answered Feb 13, 2013 at 15:30

You can do a little adjustment to leave a blank line at the top.

Like this.

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

answered May 2, 2016 at 19:06

webzywebzy

3382 silver badges12 bronze badges

Yes you can change it. if you call VBscript function within Javascript.

Here is simple example

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

answered Sep 7, 2011 at 5:29

SaeedSaeed

211 bronze badge

I had a similar issue when I wanted to change the box title and button title of the default confirm box. I have gone for the Jquery Ui dialog plugin http://jqueryui.com/dialog/#modal-confirmation

When I had the following:

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

I have changed it to:

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

Can be seen working here https://jsfiddle.net/5aua4wss/2/

Hope that helps.

answered May 9, 2018 at 11:29

justMejustMe

2,10016 silver badges20 bronze badges

Источник

I’m generating a JavaScript alert with following code in C# .NET page:

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

It displays an alert box with the heading title as «Message from webpage».

Is it possible to modify the title?

Quentin

893k122 gold badges1194 silver badges1315 bronze badges

asked Dec 15, 2009 at 5:09

No, you can’t.

It’s a security/anti-phishing feature.

user229044♦

229k40 gold badges329 silver badges336 bronze badges

answered Dec 15, 2009 at 5:27

PierretenPierreten

9,7996 gold badges37 silver badges45 bronze badges

You can do this in 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>

(Although, I really wish you couldn’t.)

answered Dec 15, 2009 at 5:24

Chris FulstowChris Fulstow

40.7k10 gold badges86 silver badges109 bronze badges

I Found this Sweetalert for customize header box javascript.

For example

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

answered Jul 27, 2016 at 7:32

Abed PutraAbed Putra

1,0732 gold badges19 silver badges36 bronze badges

Override the javascript window.alert() function.

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

With this you can create your own alert() function. Create a new ‘cool’ looking dialog (from some div elements).

Tested working in chrome and webkit, not sure of others.

answered Nov 16, 2012 at 6:56

To answer the questions in terms of how you asked it.

This is actually REALLY easy (in Internet Explorer, at least), i did it in like 17.5 seconds.

If you use the custom script that cxfx provided: (place it in your apsx file)

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

You can then call it just like you called the regular alert. Just modify your code to the following.

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

Hope that helps you, or someone else!

Paul D. Waite

95.6k55 gold badges198 silver badges267 bronze badges

answered Jul 9, 2010 at 14:08

kralco626kralco626

8,33637 gold badges110 silver badges168 bronze badges

answered Feb 13, 2013 at 15:30

You can do a little adjustment to leave a blank line at the top.

Like this.

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

answered May 2, 2016 at 19:06

webzywebzy

3382 silver badges12 bronze badges

Yes you can change it. if you call VBscript function within Javascript.

Here is simple example

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

answered Sep 7, 2011 at 5:29

SaeedSaeed

211 bronze badge

I had a similar issue when I wanted to change the box title and button title of the default confirm box. I have gone for the Jquery Ui dialog plugin http://jqueryui.com/dialog/#modal-confirmation

When I had the following:

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

I have changed it to:

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

Can be seen working here https://jsfiddle.net/5aua4wss/2/

Hope that helps.

answered May 9, 2018 at 11:29

justMejustMe

2,10016 silver badges20 bronze badges

Источник

I’m generating a JavaScript alert with following code in C# .NET page:

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

It displays an alert box with the heading title as «Message from webpage».

Is it possible to modify the title?

Quentin

893k122 gold badges1194 silver badges1315 bronze badges

asked Dec 15, 2009 at 5:09

No, you can’t.

It’s a security/anti-phishing feature.

user229044♦

229k40 gold badges329 silver badges336 bronze badges

answered Dec 15, 2009 at 5:27

PierretenPierreten

9,7996 gold badges37 silver badges45 bronze badges

You can do this in 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>

(Although, I really wish you couldn’t.)

answered Dec 15, 2009 at 5:24

Chris FulstowChris Fulstow

40.7k10 gold badges86 silver badges109 bronze badges

I Found this Sweetalert for customize header box javascript.

For example

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

answered Jul 27, 2016 at 7:32

Abed PutraAbed Putra

1,0732 gold badges19 silver badges36 bronze badges

Override the javascript window.alert() function.

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

With this you can create your own alert() function. Create a new ‘cool’ looking dialog (from some div elements).

Tested working in chrome and webkit, not sure of others.

answered Nov 16, 2012 at 6:56

To answer the questions in terms of how you asked it.

This is actually REALLY easy (in Internet Explorer, at least), i did it in like 17.5 seconds.

If you use the custom script that cxfx provided: (place it in your apsx file)

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

You can then call it just like you called the regular alert. Just modify your code to the following.

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

Hope that helps you, or someone else!

Paul D. Waite

95.6k55 gold badges198 silver badges267 bronze badges

answered Jul 9, 2010 at 14:08

kralco626kralco626

8,33637 gold badges110 silver badges168 bronze badges

answered Feb 13, 2013 at 15:30

You can do a little adjustment to leave a blank line at the top.

Like this.

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

answered May 2, 2016 at 19:06

webzywebzy

3382 silver badges12 bronze badges

Yes you can change it. if you call VBscript function within Javascript.

Here is simple example

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

answered Sep 7, 2011 at 5:29

SaeedSaeed

211 bronze badge

I had a similar issue when I wanted to change the box title and button title of the default confirm box. I have gone for the Jquery Ui dialog plugin http://jqueryui.com/dialog/#modal-confirmation

When I had the following:

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

I have changed it to:

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

Can be seen working here https://jsfiddle.net/5aua4wss/2/

Hope that helps.

answered May 9, 2018 at 11:29

justMejustMe

2,10016 silver badges20 bronze badges

Источник

I’m generating a JavaScript alert with following code in C# .NET page:

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

It displays an alert box with the heading title as «Message from webpage».

Is it possible to modify the title?

Quentin

893k122 gold badges1194 silver badges1315 bronze badges

asked Dec 15, 2009 at 5:09

No, you can’t.

It’s a security/anti-phishing feature.

user229044♦

229k40 gold badges329 silver badges336 bronze badges

answered Dec 15, 2009 at 5:27

PierretenPierreten

9,7996 gold badges37 silver badges45 bronze badges

You can do this in 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>

(Although, I really wish you couldn’t.)

answered Dec 15, 2009 at 5:24

Chris FulstowChris Fulstow

40.7k10 gold badges86 silver badges109 bronze badges

I Found this Sweetalert for customize header box javascript.

For example

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

answered Jul 27, 2016 at 7:32

Abed PutraAbed Putra

1,0732 gold badges19 silver badges36 bronze badges

Override the javascript window.alert() function.

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

With this you can create your own alert() function. Create a new ‘cool’ looking dialog (from some div elements).

Tested working in chrome and webkit, not sure of others.

answered Nov 16, 2012 at 6:56

To answer the questions in terms of how you asked it.

This is actually REALLY easy (in Internet Explorer, at least), i did it in like 17.5 seconds.

If you use the custom script that cxfx provided: (place it in your apsx file)

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

You can then call it just like you called the regular alert. Just modify your code to the following.

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

Hope that helps you, or someone else!

Paul D. Waite

95.6k55 gold badges198 silver badges267 bronze badges

answered Jul 9, 2010 at 14:08

kralco626kralco626

8,33637 gold badges110 silver badges168 bronze badges

answered Feb 13, 2013 at 15:30

You can do a little adjustment to leave a blank line at the top.

Like this.

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

answered May 2, 2016 at 19:06

webzywebzy

3382 silver badges12 bronze badges

Yes you can change it. if you call VBscript function within Javascript.

Here is simple example

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

answered Sep 7, 2011 at 5:29

SaeedSaeed

211 bronze badge

I had a similar issue when I wanted to change the box title and button title of the default confirm box. I have gone for the Jquery Ui dialog plugin http://jqueryui.com/dialog/#modal-confirmation

When I had the following:

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

I have changed it to:

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

Can be seen working here https://jsfiddle.net/5aua4wss/2/

Hope that helps.

answered May 9, 2018 at 11:29

justMejustMe

2,10016 silver badges20 bronze badges

Источник

я генерирую предупреждение JavaScript со следующим кодом на странице C# .NET:

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

он отображает окно предупреждения с заголовком заголовка как «сообщение с веб-страницы».

можно ли изменить название?

11 ответов

вздох…нет, вы не можете.

его безопасности/анти-фишинга.

вы можете сделать это в 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>

(хотя, я действительно хотел бы, чтобы вы не могли.)

переопределить окно javascript.функция предупреждения.

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

С этим вы можете создать свой собственный

Я нашел это Sweetalert для настройки заголовка javascript.

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

здесь довольно хороший «Хак» -https://stackoverflow.com/a/14565029 где вы используете iframe с пустым src для генерации предупреждения / подтверждения сообщения — он не работает на Android (ради безопасности), но может соответствовать вашему сценарию.

чтобы ответить на вопросы с точки зрения того, как вы его задали.

это на самом деле очень легко (в Internet Explorer, по крайней мере), я сделал это как 17.5 секунд.

Если вы используете пользовательский скрипт, предоставленный cxfx: (поместите его в файл apsx)

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

затем вы можете вызвать его так же, как вы вызвали обычное предупреждение. Просто измените код следующим образом.

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

надеюсь, что это поможет вам, или кому-то еще!

Да, вы можете изменить его. если вы вызываете функцию VBscript в Javascript.

вот простой пример

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

когда вы запускаете или просто присоединяетесь к проекту на основе веб-приложений, дизайн интерфейса может быть хорошим. В противном случае это должно быть изменено. Для приложений Web 2.0 вы будете работать с динамическим содержимым, многими эффектами и другими вещами. Все эти вещи в порядке, но никто не думал о том, чтобы стиль JavaScript оповещения и подтверждения коробки.
Вот они, кстати,.. полностью динамический, управляемый JS и CSS
Создайте простой 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>

затем создайте простое имя файла js jsConfirmStyle.js. Вот простой код 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();

}

вы можете скачать полный исходный код

вы можете сделать небольшую корректировку, чтобы оставить пустую строку вверху.

такой.

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

у меня была аналогичная проблема, когда я хотел изменить заголовок окна и название кнопки окна подтверждения по умолчанию. Я пошел на плагин диалога jQuery Uihttp://jqueryui.com/dialog/#modal-confirmation

когда у меня было следующее:

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

Я изменил его на:

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

можно увидеть, работая здесь https://jsfiddle.net/5aua4wss/2/

надеюсь, что это поможет.

Источник

Когда вы запускаете или просто присоединяетесь к проекту, основанному на веб-приложениях, дизайн интерфейса может быть хорошим. В противном случае это следует изменить. В приложениях Web 2.0 вы будете работать с динамическим содержимым, множеством эффектов и прочим. Все это в порядке, но никто не подумал о стилизации окон предупреждений и подтверждения JavaScript. Вот они, .. полностью динамические, на основе JS и CSS. Создание простого 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>

Затем создайте простой файл js с именем jsConfirmStyle.js. Вот простой код 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();

}

Вы можете скачать полный исходный код отсюда

Источник

Когда вы запускаете или просто присоединяетесь к проекту на основе web-приложений, дизайн интерфейса, возможно, хорош. В противном случае это должно быть изменено. Для приложений Web 2.0 вы будете работать с динамическим содержимым, множеством эффектов и другими материалами. Все это прекрасно, но никто не задумывался над тем, чтобы создать JavaScript-оповещение и подтвердить флажки.
Вот их путь, полностью динамичный, JS и CSS
Создайте простой 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>

Затем создайте имя простого js файла jsConfirmStyle.js. Вот простой код 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();

}

Вы можете скачать полный исходный код здесь

Источник

Create Customized Alert Box With jQuery UI
Create Customized Alert Box With SweetAlert2
Create Customized Alert Box With A Custom Function

This article will teach you how to create a customized alert box in JavaScript using jQuery UI, SweetAlert2, and a custom alert function.

Create Customized Alert Box With jQuery UI

You can use jQuery UI to mimic the functionality of the JavaScript native alert() function. Though jQuery UI has lots of APIs, you can use its dialog() API to create a custom alert box.

Meanwhile, unlike the native JavaScript native alert() function, you can drag the alert box created with the dialog() API.

We’ve imported jQuery, jQuery UI, and the CSS styles for jQuery UI into our code in the following code block. Therefore, we can use the dialog() API to create the custom alert box.

Meanwhile, the dialog() API needs a location on the web page that it’ll display the custom alert box. So, we’ll use an HTML div element with a unique ID.

What’s more, this div should have a title attribute containing text that’ll be the title of the custom alert box. When you run the code in your web browser, you’ll observe the custom alert box created with the dialog() API.

Code:

<head>
    <meta charset="utf-8">
    <title>Customized alert box with jQueryUI</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#jquery-ui-dialog").dialog();
        });
    </script>
</head>
<body>
    <main style="display: flex; justify-content: center;">
        <div id="jquery-ui-dialog" title="A dialog">
            <p>You can move this dialog box, or close it with the 'X' sign at the top-right.</p>
        </div>
    </main>
</body>

Output:

Create Customized Alert Box With SweetAlert2

SweetAlert2 allows you to create an alert box that is accessible, customizable, and responsive. It aims to replace JavaScript popup boxes, including the native JavaScript alert() function.

You can use SweetAlert2 in various ways in your project. However, for this article, we’ll use it with the <script> tag via a Content Delivery Network (CDN).

Therefore, when SweetAlert2 downloads, you can use it by attaching an event listener to an HTML button. You can call on the Swal.fire() method and supply it with arguments in the event listener.

The argument that you supply to Swal.fire() determines the output of the customized alert box.

We attached an event listener to an HTML button in the next code block. This button has an HTML ID attribute of #showAlert.

We’ve used jQuery to grab the ID to make things easy for you. After that, we call on the Swal.fire() method with arguments that shows a customized alert.

Code:

<head>
    <meta charset="utf-8">
    <title>Customized alert box with SweetAlert2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
    <style type="text/css">
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <main>
        <button id="showAlert">Click Me</button>
    </main>
</body>
<script>
    $("#showAlert").click(function(){
        Swal.fire(
            'Are you done?',
        )
    });
</script>

Output:

Custom Alert Box With Sweetalert2

Create Customized Alert Box With A Custom Function

You can create a custom function that’ll replace the native alert() box in the user’s web browser. You’ll do this from the window object, and the custom function will work as such:

Set constants for the alert title and alert button text.
Check if an HTML has an ID of alert_container. If true, stop the creation of the custom alert.
Create the div element for the alert container and append it to the body element. Afterward, do the following:
- Give the alert container an HTML ID.
- Give the alert container an HTML class name.
Create a div element for the alert box and append it to the alert container. Afterward, give it an HTML class name.
Set the top position of the alert box using scrollTop.
Set the left position of the alert box using scrollWidth and offsetWidth.
Create an HTML h1 element for the alert title. Then do the following:
- Create a text node for the alert title. Its value should be the alert title constant.
- Append the h1 to the alert box.
- Append the text node to the alert title.
Create the HTML button element. Then do the following:
- Create a text node for the button text. Its value should be the alert title constant.
- Append the button text to the button element.
- Append the button element to the alert box.
- Assign the button element a unique class name.
- Attach an event listener to the button. The event listener should close the custom alert box.

In addition, you should create a function that’ll remove the custom alert. This should happen when the user clicks the OK button.

The function should use the following steps:

Get the HTML body element.
Get the alert container.
Use the removeChild method to remove the alert container from the HTML body element.

Finally, create CSS styles to style the custom alert function. In the subsequent code blocks, you’ll find the implementation for the following:

The custom alert function
The function that removes it
The CSS styles for the custom alert function

HTML and JavaScript code:

<body>
    <input type="button" value = "Say Hello" onclick="alert('Hello');" />
</body>
<script>
    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if (document.getElementById) {
        // Swap the native alert for the custom
        // alert
        window.alert = function (alert_message) {
            custom_alert(alert_message);
        }
    }

    function custom_alert(alert_message) {

        /* You can utilize the web page address
         * for the alert message by doing the following:

         const ALERT_TITLE = "The page at " + document.location.href + " says: ";
         */
        const ALERT_TITLE = "Alert Message";
        const ALERT_BUTTON_TEXT = "OK";

        // Check if there is an HTML element with
        // an ID of "alert_container".If true, abort
        // the creation of the custom alert.
        let is_alert_container_exist = document.getElementById("alert_container");
        if (is_alert_container_exist) {
            return;
        }

        // Create a div to serve as the alert
        // container. Afterward, attach it to the body
        // element.
        let get_body_element = document.querySelector("body");
        let div_for_alert_container = document.createElement("div");
        let alert_container = get_body_element.appendChild(div_for_alert_container);

        // Add an HTML ID and a class name for the
        // alert container
        alert_container.id = "alert_container";
        alert_container.className = "alert_container"

        // Create the div for the alert_box and attach
        // it to the alert container.
        let div_for_alert_box = document.createElement("div")
        let alert_box = alert_container.appendChild(div_for_alert_box);
        alert_box.className = "alert_box";

        // Set the position of the alert box using
        // scrollTop, scrollWidth, and offsetWidth
        alert_box.style.top = document.documentElement.scrollTop + "px";
        alert_box.style.left = (document.documentElement.scrollWidth - alert_box.offsetWidth) / 2 + "px";

        // Create h1 to hold the alert title
        let alert_header_tag = document.createElement("h1");
        let alert_title_text = document.createTextNode(ALERT_TITLE)
        let alert_title= alert_box.appendChild(alert_header_tag);
        alert_title.appendChild(alert_title_text);

        // Create a paragraph element to hold the
        // alert message
        let alert_paragraph_tag = document.createElement("p");
        let alert_message_container = alert_box.appendChild(alert_paragraph_tag);
        alert_message_container.textContent = alert_message;

        // Create the OK button
        let ok_button_tag = document.createElement("button");
        let ok_button_text = document.createTextNode(ALERT_BUTTON_TEXT)
        let ok_button = alert_box.appendChild(ok_button_tag);
        ok_button.className = "close_btn";
        ok_button.appendChild(ok_button_text);

        // Add an event listener that'll close the
        // custom alert
        ok_button.addEventListener("click", function () {
            remove_custom_alert();
        }, false);
    }

    function remove_custom_alert() {
        let HTML_body = document.querySelector("body");
        let alert_container = document.getElementById("alert_container");
        HTML_body.removeChild(alert_container);
    }
</script>

CSS code:

.alert_container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #0000004d;
}

.alert_box {
    position: relative;
    width: 300px;
    min-height: 100px;
    margin-top: 50px;
    border: 1px solid #666;
    background-color: #fff;
}

.alert_box h1 {
    font-size: 0.9em;
    margin: 0;
    background-color: #1560bd;
    color: #fff;
    border-bottom: 1px solid #000;
    padding: 2px 0 2px 5px;
}

.alert_box p {
    font-size: 0.7em;
    height: 50px;
    margin-left: 55px;
    padding-left: 5px;
}

.close_btn {
    width: 70px;
    font-size: 0.7em;
    display: block;
    margin: 5px auto;
    padding: 7px;
    border: 0;
    color: #fff;
    background-color: #1560bd;
    border-radius: 3px;
    cursor: pointer;
}

Output:

Custom Alert Box With a Custom Function

Источник

11 ответов

Create Customized Alert Box With jQuery UI

Create Customized Alert Box With SweetAlert2

Create Customized Alert Box With A Custom Function

Читайте также: