Message Popup

Question

Hi

  I have below message Popup. I want Title should appear on left with primary background & Horizonal line should be full width.

Image attached.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MBox.ascx.cs" Inherits="Payroll.MBox" %>

<script type="text/javascript">

    var swalInit = swal.mixin({
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-primary',
        cancelButtonClass: 'btn btn-light'
    });


    function ShowPopup(heading, body, type) {
        swalInit.fire({
/*            title: `<div style="border-bottom: 1px solid #ddd; padding-bottom: 10px;">${heading}</div>`,*/
            /*title: `<div style="font-weight: bold; text-align: left; border-bottom: 1px solid #ddd; padding-bottom: 10px; width: 100%;">${heading}</div>`,*/
            title: `
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span style="font-weight: bold; text-align: left;">${heading}</span>
            </div>
            <hr style="border: 1px solid #ddd; margin-top: 8px; margin-bottom: 15px; width: 100%;">`,
            html: `<p style="margin-top: 10px;">${body}</p>`,
            icon: type,
            position: 'center', // Adjust position as needed
            allowOutsideClick: false,
            confirmButtonText: 'OK',
            timer: 6000
        });
    }


</script>

JavaScript

Copy

Thanks

Answer 1

Try below solution,

function ShowPopup(heading, body, type) {
    swalInit.fire({
        title: `
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
            <span style="font-weight: bold; text-align: left; background-color: #007bff; color: white; padding: 5px 10px;">${heading}</span>
        </div>
        <hr style="border: 1px solid #ddd; margin-top: 8px; margin-bottom: 15px; width: 100%;">`,
        html: `<p style="margin-top: 10px;">${body}</p>`,
        icon: type,
        position: 'center', // Adjust position as needed
        allowOutsideClick: false,
        confirmButtonText: 'OK',
        timer: 6000
    });
}

Thanks

Answer 2

Hi Naimish

  It is still not displaying properly . Neither Heading is left aligned & also line is not appearing. Iamge also attached

function ShowPopup(heading, body, type) {
        swalInit.fire({

            title: `
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span style="font-weight: bold; text-align: left; background-color: #007bff; color: white; padding: 5px 10px;">${heading}</span>
            </div>
            <hr style="border: 1px solid #ddd; margin-top: 8px; margin-bottom: 15px; width: 100%;">`,
            html: `<p style="margin-top: 10px;">${body}</p>`,
            icon: type,
            position: 'center', // Adjust position as needed
            allowOutsideClick: false,
            confirmButtonText: 'OK',
            timer: 6000
        });
    }

public void ShowMessage(String Title, String Text, String Type)
        {
            Text = Text.Replace("'", "").Replace("/", " ").Replace(";", " ").Replace(":", " ").Replace(",", " ");
            Text = System.Text.RegularExpressions.Regex.Replace(Text, @"\t|\n|\r", " ");
            if (Common.CommonFunction.IE(Request.Browser.Browser))
            {
                Common.MessageBox.Show(Text);
            }
            else
            {
                ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + Title + "', '" + Text + "','" + Type + "');", true);
            }
        }

Thanks

Answer 3

To meet your requirements, you want to style the title of the message popup so that it appears on the left side with a primary background color. Additionally, you want a horizontal line below the title that spans the full width of the popup. Here's how you can adjust your ShowPopup function to achieve this:

<script type="text/javascript">

    var swalInit = swal.mixin({
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-primary',
        cancelButtonClass: 'btn btn-light'
    });

    function ShowPopup(heading, body, type) {
        swalInit.fire({
            title: `
            <div style="display: flex; align-items: center; background-color: #007bff; color: white; padding: 10px;">
                <span style="font-weight: bold; text-align: left; width: 100%;">${heading}</span>
            </div>
            <hr style="border: 1px solid #ddd; margin-top: 0px; margin-bottom: 15px; width: 100%;">`,
            html: `<p style="margin-top: 10px;">${body}</p>`,
            icon: type,
            position: 'center', // Adjust position as needed
            allowOutsideClick: false,
            confirmButtonText: 'OK',
            timer: 6000
        });
    }

</script>

Explanation of Changes:

1. Title Styling:

   • Background Color: The title is wrapped in a div with background-color: #007bff; (Bootstrap's primary color) and color: white; to make the text stand out.
   • Padding: Added padding inside the div to provide spacing around the title text.

2. Horizontal Line:

   • The <hr> tag is used to create the horizontal line. It's styled to span the full width and placed right below the title div.

3. Text Alignment:

   • The title is aligned to the left within the div with text-align: left;.

Result:

• The title will appear on the left side with a primary blue background.
• A horizontal line will appear just below the title, extending across the entire width of the popup.