Customize IE and Chrome Dialog Box

Question

Customize IE and Chrome Dialog Box

Qamar, Mo 106

How do I customize IE and Chrome Dialog Box that says:

localhost:83 says

189283-ajax.txt

3 answers

Your answer

Answer 1

AgaveJoe 30,126

It's not possible to customize the alert. A modal as a good alternative but you'll need to make a few changes in the markup. Basically, the modal is part of the page markup. You'll show/hide the modal and maybe dynamically populate the contents.

Just do a Google search for a modal that fits into your current design.

Qamar, Mo 106 Reputation points

2022-04-01T20:35:03.493+00:00

I thought there is a way to do it using Ajax (jQuery.ajax).
I googled and found some code but none worked in my case.

success: function(data) {
successmessage = 'Data was succesfully captured';
$("label#successmessage").text(successmessage);
},
error: function(data) {
successmessage = 'Error';
$("label#successmessage").text(successmessage);
},
Albert Kallal 5,586 Reputation points

2022-04-01T20:37:35.69+00:00

Your wee bit of code is not enough - but you can just a jQuery.UI dialog. See my post below.
AgaveJoe 30,126 Reputation points

2022-04-01T20:48:12.7+00:00
The jQuery selector does not look correct. If the unique element with id=successmessage is standard HTML then this should work.

$("#successmessage").text(successmessage);

If you using a label server control then the syntax is as follows.

$("#<%=Label1.ClientID%>").text(successmessage);
Qamar, Mo 106 Reputation points

2022-04-01T20:58:32.62+00:00

The code I posted was just an example of what I found when Googled; my page does not have a label for the alert since I am using built-in Alert which displays the message I want to display but also displays "localhost:says..." which I am trying to get rid of.

My code is attached; it displays the Alert with localhost says189342-code.txt

Answer 2

Well, those built in dialog boxes (for reasons of security) tend to spit out your web url. Now, of course when you publish to a real production site - with a domain name, then that local host text will show as your URL.

However, at the end of the day? They look quite bad - and don't allow you any customizing.

So, I suggest you find and adopt a nice "dialog" box. There are boatloads of them on the internet, but the real problem is which one to pick and use?

I tend to think going with say the most popular one, and also the one that is the "least" efforts on your part.

For asp.net web pages? I suggest two possibilities that are really nice.

If you already using the AjaxToolkit, then it has a very nice pop dialog add-in, and I used that one in the past quite a bit.

Next choice? a lot suggest bootstrap ones, but I find them really difficult to work with, but that's a possible.

And my current favorite choice? Well, 99% of web sites - even for about 10 years now for asp.net web forms? You have and will use jQuery. It is installed by default, so I suggest you add in jQuery.UI. It has a bunch of great options like sliding panels and "accordions", and has a REALLY nice dialog box.

Edit:

Here is a example of how one looks:

Say we have this grid view with a delete button

So, our delete button in the grid view is this:

So, if we click on that button, then the confirm dialog pops up - the default built in one. As above shows - not very pretty at all.

And the code behind for that delete button is quite simple:

    Protected Sub cmdDelete_Click(sender As Object, e As EventArgs)  
  
        Dim btn As LinkButton = sender  
        Dim gRow As GridViewRow = btn.NamingContainer  
        Dim PKID As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")  
  
        Dim strSQL As String = "DELETE FROM tblHotels WHERE ID = " & PKID  
  
        Using conn As New SqlConnection(My.Settings.TEST4)  
            Using cmdSql As New SqlCommand(strSQL, conn)  
                conn.Open()  
                cmdSql.ExecuteNonQuery()  
            End Using  
        End Using  
  
        LoadGrid()  
  
    End Sub

Now, lets do the same with jQuery.UI dialog.

The button code becomes this:

Once again, like all asp.net buttons - if the onclientclick returns true, then the button runs, else if we return false, the button does not fire (run server side code behind).

So, with jQuery.UI, we use a div for the popup, and have this div and code now:

Now, when I hit delete button, the dialog is custom - and very nice:

And it even "darkens" the rest of the screen. So, consider grabbing a dialog utility. There are number, but the above is a jQuery.ui example to give you an idea of what they look like.

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Qamar, Mo 106 Reputation points

2022-04-01T20:45:00.85+00:00

I have seen this code sample somewhere using a 3rd party JS; I think it was cdnJ but it didn't work in my case..

How do I implement your idea in my code which is using "success" and "failure" function to display the message?
Albert Kallal 5,586 Reputation points

2022-04-01T21:16:51.577+00:00

Well, we could for example make a general routine - say with JUST a ok button. and we could pass it the text we want.

So, say like this: (we pass both text and title).

And clicking on the button, you get this:

So, you can make a single pop dialog routine for the whole application - it really quite endless as to what you can do. But the above is of course quite bare bones - since all we have is a ok button.

so, it can be a bit of work to set this up the first time - but after that, it becomes rather easy. I not had the time, but I often though of making a drop in custom asp control - and then I could just drag it from the tool box when needed. You can also look at and consider "sweet alert", as that also quite nice. But, I like jQuery.UI. But as noted, you WILL have to add jQuery.UI to your project (and 99% chance you already have jQuery anyway).
Qamar, Mo 106 Reputation points

2022-04-01T21:34:00.733+00:00

How do I implement this code in my Ajax "success" and "error" functions?
Albert Kallal 5,586 Reputation points

2022-04-01T22:35:53.253+00:00

Well, you just quite much replace your use of alert with a custom routine.

Say, like this for a ajax web call method:

And now you get this:

I would build a test web page - a simple button, and get the dialog working - don't' test against production ajax and other complex code - get a basic pop - play a bit - make sure it works, and THEN try introducing to some existing code - such as an ajax call.

Answer 3

Yijing Sun-MSFT 7,096

Hi @Qamar, Mo ,
I think you could use Ajax ModalPopupExtender. It could popup the windows without the 'localhost'.

Best regards,
Yijing Sun

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Customize IE and Chrome Dialog Box

3 answers

Your answer