Show Dialog Box Without Use of ModalPopupExtender

Introduction

If you want to show Dialog box over your page, on click event of control, then you will use ModalPopExtender, which is Ajax Control, so instead of using this, I am giving one solution how to show Dialog box over Page which will be block Background, show title of Dialog Box, show message in Dialog Box.

Using the Code

    <style type="text/css">           
 
        .ui-dialog {            
            width: 400px !important;
            position: fixed;            
            height: 100%;
            display:block;
            z-index: 10;
            outline: 9999px solid rgba(0,0,0,0.5);
        }
       
    </style>
<asp:Panel ID="dialogPanel" 
runat="server" Visible="false" EnableViewState="false">

        <div id="dialogBox" title="VENTAS COSTES TOTAL INFORMACION"> 
        <%--información total de los costos de ventas--%>
            <p>
                <% =ViewState["dialogMessage"].ToString() %>
            </p>
        </div>
    </asp:Panel>

In .cs file , you need to enter these lines only on control click event:

///<summary>
/// Shows the Dialog Box with message
///
private void ShowDialogBox()
{
string message= string.Empty();
message= "Here you can write what you want to display in Dialog Box";
ViewState["dialogMessage"] = message;
dialogPanel.Visible = true;
}

Points of Interest

Here, you do not need to worry about Close button click event , when you click on Close Image, Dialog Box disappears from the screen.

History

• 27^th November 2014: Initial version