Div Popup Example

If need to show a Dialog :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EdasDialog.ascx.cs" Inherits="CRMWeb.eDASWeb.UserControl.EdasDialog" %>

<style type="text/css">
  
 /*
popup buttons
*/
    .edas_dlg_close_button
    {
        float: right;
        background-color: #696969;
        width: 115px;
        height: 31px;
        border: none;
        color: #FFF;
        font-size: 15pt;
        margin-right: 20%;
        cursor: pointer;
        margin-bottom: 10px;
    }
    
    .edas_dlg_new_txn_yes
    {
        float: right;
        background-color: #a9a9a9;
        width: 80px;
        height: 31px;
        border: none;
        color: #FFF;
        font-size: 15pt;
        cursor: pointer;
    }
    
    .edas_dlg_new_txn_no
    {
        float: right;
        background-color: #696969;
        width: 80px;
        height: 31px;
        border: none;
        color: #FFF;
        font-size: 15pt;
        cursor: pointer;
    }
</style>



<div id="div_edas_dlg_background_alert" runat="server" enableviewstate="True" style="position: fixed;
    left: 0; top: 0; bottom: 0; z-index: 10; width: 100%; background-color: grey;
    opacity: 0.4">
</div>
<div id="div_edas_dlg_background_confirm" runat="server" enableviewstate="True" style="position: fixed;
    left: 0; top: 0; bottom: 0; z-index: 10; width: 100%; background-color: grey;
    opacity: 0.4">
</div>
<div id="div_edas_alert" enableviewstate="True" runat="server" style="position: absolute;
    left: 0; top: 40%; z-index: 1000; background-color: white; width: 80%; margin-left: 10%;">
    <div style="float: left; margin-left: 20%">
        <asp:Label runat="server" ID="lblEdasDlgAlert"></asp:Label>
    </div>
    <br />
    <br />
    <div>
        <asp:Button type="button" ID="btnEdasDlgAlert" formnovalidate CssClass="edas_dlg_close_button" runat="server" OnClick="btnEdasAlert_Click" />
    </div>
</div>
<div id="div_edas_dialog" runat="server" enableviewstate="True" style="position: absolute;
    left: 0; top: 40%; z-index: 1000; background-color: white; width: 80%; margin-left: 10%;
    padding: 10px;">
    <div style="float: left; margin-left: 20%">
        <asp:Label runat="server" ID="lblEdasDialogText"></asp:Label>
    </div>
    <br />
    <br />
    <div style="float: right; margin-right: 20%;">
        <asp:Button Text="Yes" ID="btnEdasDialogYes" formnovalidate CssClass="edas_dlg_new_txn_yes" Style="margin-left: 15px;"
            runat="server" OnClick="btnEdasDialogYes_Click" />
        <asp:Button Text="No" ID="btnEdasDialogNo" formnovalidate CssClass="edas_dlg_new_txn_no" runat="server"
         OnClick="btnEdasDialogNo_Click" />
    </div>
</div>

Code behind :

using System;
using System.Collections.Generic;

namespace CRMWeb.eDASWeb.UserControl
{
    public enum DialogAction
    {
        OnClickClose,
        OnClickYes,
        OnClickNo
    };

    public partial class EdasDialog : System.Web.UI.UserControl
    {

        private readonly Dictionary<string, Action> _onClickClose;
        private readonly Dictionary<string, Action> _onClickYes;
        private readonly Dictionary<string, Action> _onClickNo;

        public EdasDialog()
        {
            _onClickClose = new Dictionary<string, Action>();
            _onClickYes = new Dictionary<string, Action>();
            _onClickNo = new Dictionary<string, Action>();
        }

        private string TriggerControlId
        {
            get { return ViewState["TriggerControlId"] == null ? string.Empty : ViewState["TriggerControlId"].ToString(); }
            set { ViewState["TriggerControlId"] = value; }
        }

        #region Register Callback Handler

        public void RegisterCallback(DialogAction actionType, string controlId, Action handler)
        {
            switch (actionType)
            {
                case DialogAction.OnClickClose:

                    if (!_onClickClose.ContainsKey(controlId))
                        _onClickClose.Add(controlId, handler);

                    break;
                case DialogAction.OnClickYes:

                    if (!_onClickYes.ContainsKey(controlId))
                        _onClickYes.Add(controlId, handler);

                    break;
                case DialogAction.OnClickNo:

                    if (!_onClickNo.ContainsKey(controlId))
                        _onClickNo.Add(controlId, handler);

                    break;
                default:
                    throw new ArgumentOutOfRangeException("actionType");
            }
        }

        #endregion

        #region Dialogs

        public void ShowAlert(string msg,string callbackCtlId = "", string btnText = "Close",int zIndex = 1000)
        {
            lblEdasDlgAlert.Text = msg;
            btnEdasDlgAlert.Text = btnText;
            div_edas_dlg_background_alert.Visible = true;
            div_edas_alert.Visible = true;
            div_edas_alert.Style["z-index"] = zIndex.ToString();

            if (!string.IsNullOrWhiteSpace(callbackCtlId))
            {
                TriggerControlId = callbackCtlId;
            }
        }

        private void CloseAlert()
        {
            div_edas_dlg_background_alert.Visible = false;
            div_edas_alert.Visible = false;
        }

        public void ShowConfirm(string msg, string callbackCtlId = "",int zIndex = 1000)
        {
            lblEdasDialogText.Text = msg;
            div_edas_dlg_background_confirm.Visible = true;
            div_edas_dialog.Visible = true;
            div_edas_dialog.Style["z-index"] = zIndex.ToString();

            if (!string.IsNullOrWhiteSpace(callbackCtlId))
            {
                TriggerControlId = callbackCtlId;
            }
        }

        private void CloseConfirm()
        {
            div_edas_dlg_background_confirm.Visible = false;
            div_edas_dialog.Visible = false;
        }

        #endregion

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                CloseConfirm();
                CloseAlert();
            }
        }

        protected void btnEdasDialogYes_Click(object sender, EventArgs e)
        {

            if (TriggerControlId != string.Empty && _onClickYes.ContainsKey(TriggerControlId))
            {
                Action callback;
                if (_onClickYes.TryGetValue(TriggerControlId, out callback))
                {
                    callback.Invoke();
                }
            }
            CloseConfirm();
        }

        protected void btnEdasDialogNo_Click(object sender, EventArgs e)
        {
            if (TriggerControlId != string.Empty && _onClickNo.ContainsKey(TriggerControlId))
            {
                Action callback;
                if (_onClickNo.TryGetValue(TriggerControlId, out callback))
                {
                    callback.Invoke();
                }
            }

            CloseConfirm();
        }

        protected void btnEdasAlert_Click(object sender, EventArgs e)
        {
            if (TriggerControlId != string.Empty && _onClickClose.ContainsKey(TriggerControlId))
            {
                Action callback;
                if (_onClickClose.TryGetValue(TriggerControlId, out callback))
                {
                    callback.Invoke();
                }
            }

            CloseAlert();
        }
    }
}

Usage :

Step 1 : Register

<%@ Register TagPrefix="dlg" TagName="Dialog" Src="../UserControl/EdasDialog.ascx" %>

Step 2: put on page somewhere

<dlg:Dialog runat="server" ID="EdasDialog"></dlg:Dialog>

Step 3: C# side call


If only need to show a Message (on click “close” , no action needed)


Alert Dialog :

EdasDialog.ShowAlert(MobileNoNotValidMsg,"Close");

Parameter 1 : Pass in the message you want to show
Parameter 2: Pass in the text on button if your scenario need to show a different one , default value is “Close”


If you want to register a callback delegate after click “Close” or ”Yes” or “No”


then you can do like this (Example):


1.register callback action ,dialog action type , control id (need register for each page post back)


Register “Yes” callback action to home button :

 EdasDialog.RegisterCallback(DialogAction.OnClickYes, btnHome.ID, () =>
            {
                var ret = _presenter.StartNewTxn();
                if (ret.IsSuccessful)
                {
                    Response.Redirect(PageUrls.CustomerQueueInfoUrl);
                }
                else
                {
                    EdasDialog.ShowAlert(ret.ErrMsg);
                }
            });

Register “Close” callback action to mobile check button :

EdasDialog.RegisterCallback(DialogAction.OnClickClose, btnMobileCheck.ID, () =>
                {


                });

2. Pass in a control id where you show your alert / confirmation dialog


Pass in home button id here :

 EdasDialog.ShowConfirm(StartNewTxnMsg, btnHome.ID);

Pass in mobile check button id here :

 EdasDialog.ShowAlert(MobileNoNotValidMsg,btnMobileCheck.ID);

If need to show a popup :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EdasPopup.ascx.cs" Inherits="CRMWeb.eDASWeb.UserControls.EdasPopup" %>

<div id="div_edas_popup_background" runat="server" enableviewstate="True" style="position: fixed;
    left: 0; top: 0; bottom: 0; z-index: 10; width: 100%; background-color: grey;
    opacity: 0.4">
</div>

Code behind :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI.HtmlControls;

namespace CRMWeb.eDASWeb.UserControls
{
    public partial class EdasPopup : System.Web.UI.UserControl
    {
        /// <summary>
        /// pass in all the div ids for flyout , saperate by ';'. e.g : Div1;Div2;Div3
        /// </summary>
        public string FlyoutDivIdLst
        {
            get { return ViewState["EdasPopupDivId"] == null ? string.Empty : ViewState["EdasPopupDivId"].ToString(); }
            set { ViewState["EdasPopupDivId"] = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
                Close();
            }
        }

        public void Show(string divToShow, int zIndex = 1000)
        {
            var allIds = CheckSettings();

            if (!allIds.Contains(divToShow))
                throw new ArgumentException("Only the div Seted in FlyoutDivIdLst can be shown.");

            var ctl = Page.FindControl(divToShow) as HtmlContainerControl;

            if (ctl == null) throw new Exception("Control should be a Html Container Control");

            ctl.Style["z-index"] = zIndex.ToString();
            ctl.Style["position"] = "absolute";
            if (ctl.Style["left"] == null)
            {
                ctl.Style["left"] = "15%";
            }
            if (ctl.Style["top"] == null)
            {
                ctl.Style["top"] = "15%";
            }
            if (ctl.Style["background-color"] == null)
            {
                ctl.Style["background-color"] = "#ffffff";
            }

            div_edas_popup_background.Visible = true;
            ctl.Visible = true;
        }

        private IEnumerable<string> CheckSettings()
        {
            var allIds = FlyoutDivIdLst.Split(';');
            if (allIds.Length == 0)
                throw new ArgumentException("Please set value for flyoutDivIdLst.");

            return allIds;
        }

        public void Close()
        {
            var ids = CheckSettings();

            foreach (var id in ids)
            {
                var ctl = Page.FindControl(id) as HtmlControl;
                if (ctl != null)
                {
                    ctl.Visible = false;
                }
            }

            div_edas_popup_background.Visible = false;
        }

    }
}

usage :

Step 1 :
Register

<%@ Register TagPrefix="popup" TagName="Popup" Src="../UserControl/EdasPopup.ascx" %>

Step 2:


Put it on page anywhere you like , pass in the div id List you want to popup on your page(for example , I have 5 flyout to popup, just pass all of them split by ‘;’ )

<popup:Popup runat="server" ID="EdasPopup" 
        FlyoutDivIdLst="print_flyout;email_flyout;credit_card_flyout;div_cash_kiv;div_purchase_confirmation" />

Step 3:

EdasPopup.Show(divId);

 EdasPopup.Close();