Question

I am using this code to show a dialog box that will confirm for a delete button, it works fine, but when it pops up it doesn’t disable any controls of ASP.Net page, so I can click on any of the controls or text boxes,

First thing I wanna do is fade out the page when Jquery opens my Div tag BOX and second to disable all the controls.

here’s the code

Div (Custom Dialouge box)

    <div id="divConfMessage">
        <div align="center">
            <br /><asp:Label ID="Label1"  runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
            <asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
            <asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
        </div>
</div>

Script (jquery)

    <script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("input[id$='btDelete']").click(function() 
        {
        $("#divConfMessage").fadeIn();
        });
    });
</script>

Button

    <td>
    <asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
    OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px"  />
</td>

Css for Dialog Box

    #divConfMessage
{
    position: absolute;
    width: 500px;
    height: 200px;
    top: 50%;
    left: 30%;
    margin-left: -150px; /* Negative half of width. */
    margin-top: -100px; /* Negative half of height. */
    border: 2px solid #000;
    DISPLAY:none;
    background-color:White;
    line-height:20px;
    text-align:center;
}

Note

All of the code is in ASP content place holder for the page except CSS, I have 2 another Contents with different controls + a Master Page defining all these Content Place holders.

<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%@ Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e"  meta:resourcekey="PageResource1"  %>

Answer 1

set Modal=true; for dilogbox there is modal property, you can set it as True.

try using Jquery dialogue box ( it comes with JqueryUI plugin).

$( "#YourDivorContainerToShowAsDialog" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

EDIt: if you don’t want to use buttons, then use like this

  $( "#YourDivorContainerToShowAsDialog" ).dialog({
                modal: true             
            });

or if you want to use CSS then you can try

#YourDivorContainerToShowAsDialog 
{
position: absolute;
Z-index: withMaxValue
}