Change jQuery UI Modal dialog Title Background Color using CSS

kevinf
 
on May 12, 2022 11:29 PM
Sample_907144.zip
1897 Views

I have a popup showing Delete Error as Title an it defaults to Red Background color.

I change it to Yellow see code.

It flashes the Yellow then returns to Red please assist

<style type="text/css">
    .ui-dialog.success-dialog .ui-dialog-titlebar {
        color: yellow !important;
        font-weight: bold !important;
    }
 
    .ui-dialog.error-dialog .ui-dialog-titlebar {
        color: aqua !important;
        font-weight: bold !important;
        background-color: yellow !Important
    }
</style

 

<script type="text/javascript">
    function ShowPopupYN(message, title, <strong>cssclass</strong>) {
        $("#dialog").html(message);
        $("#dialog").dialog({
            title: title,
            modal: true,
            dialogClass: cssclass,
            buttons: {
                Yes: function () {
                    $(this).dialog('close');
                    $('[id*=btnYes]').trigger('click');
                },
                No: function () {
                    $(this).dialog('close');
                    $('[id*=btnNo]').trigger('click');
                }
            }
        });
    };
</script>

 

Message = "Delete Note " & tbNote.Text           
ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopupYN('" & Message & "','<strong>Detete Errror</strong>','error-dialog');", True)

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 13, 2022 12:32 AM
on May 13, 2022 12:32 AM

Hi kevinf,

You need to set the background instead of background-color.

Refer the example.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<style type="text/css">
    .ui-dialog.success-dialog .ui-dialog-titlebar {
        color: yellow !important;
        font-weight: bold !important;
    }

    .error-dialog .ui-dialog-titlebar {
        color: aqua !important;
        font-weight: bold !important;
        background: yellow !Important;
    }
</style>
<script type="text/javascript">
    function ShowPopupYN(message, title, cssclass) {
        $("#dialog").html(message);
        $("#dialog").dialog({
            title: title,
            modal: true,
            dialogClass: cssclass,
            buttons: {
                Yes: function () {
                    $(this).dialog('close');
                    $('[id*=btnYes]').trigger('click');
                },
                No: function () {
                    $(this).dialog('close');
                    $('[id*=btnNo]').trigger('click');
                },
                Cancel: function () {
                    $(this).dialog('close');
                    $('[id*=btnCancel]').trigger('click');
                }
            }
        });
    };
</script>
Age:
<asp:TextBox runat="server" ID="txtAge" />
<asp:Button Text="Dialog" ID="btnDialog" runat="server" OnClick="bDelete_Click" />
<asp:Button Text="Yes" ID="btnYes" runat="server" OnClick="OnYes" Style="display: none;" />
<asp:Button Text="No" ID="btnNo" runat="server" OnClick="OnNo" Style="display: none;" />
<asp:Button Text="Cancel" ID="btnCancel" runat="server" OnClick="OnCancel" Style="display: none;" />
<asp:HiddenField ID="hfYesMessage" runat="server" />
<div id="dialog"></div>

Code

C#

protected void bDelete_Click(object sender, EventArgs e)
{
    string Message = "Delete Note";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopupYN('" + Message + "','<strong>Detete Errror</strong>','error-dialog');", true);
}

protected void OnYes(object sender, EventArgs e)
{
    int age = int.Parse(txtAge.Text);
    if (age < 21 && string.IsNullOrEmpty(hfYesMessage.Value))
    {
        string message = "Age Is Under 21 Continue Yes or No to correct Age or Cancel to Exit";
        hfYesMessage.Value = message;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopupYN('" + message + "','Confirmation','error-dialog');", true);
    }
    else
    {
        hfYesMessage.Value = string.Empty;
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "alert('Record deleted.');", true);
    }
}

protected void OnNo(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "alert('You clicked No.');", true);
}

protected void OnCancel(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "alert('You clicked Cancel.');", true);
}

VB.Net

Protected Sub bDelete_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim Message As String = "Delete Note"
    ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopupYN('" & Message & "','<strong>Detete Errror</strong>','error-dialog');", True)
End Sub

Protected Sub OnYes(ByVal sender As Object, ByVal e As EventArgs)
    Dim age As Integer = Integer.Parse(txtAge.Text)

    If age < 21 AndAlso String.IsNullOrEmpty(hfYesMessage.Value) Then
        Dim message As String = "Age Is Under 21 Continue Yes or No to correct Age or Cancel to Exit"
        hfYesMessage.Value = message
        ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopupYN('" & message & "','Confirmation','error-dialog');", True)
    Else
        hfYesMessage.Value = String.Empty
        ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "alert('Record deleted.');", True)
    End If
End Sub

Protected Sub OnNo(ByVal sender As Object, ByVal e As EventArgs)
    ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "alert('You clicked No.');", True)
End Sub

Protected Sub OnCancel(ByVal sender As Object, ByVal e As EventArgs)
    ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "alert('You clicked Cancel.');", True)
End Sub

Screenshot