How to show a message box on center of screen?


Tags: html,asp.net,css,ajax

Problem :

I have a asp.net solution that uses ajax. One of the features using update progress panel is that the contents are only revealed when an ajax request is going on in the background.

So I want to basically show a black transparent background which stops the user from doing anything, and also display a box in the center of the screen that says please wait, and has a loading gif.

I was able to get the black background using this:

                    <asp:UpdateProgress ID="AjaxAnimation" runat="server">
                        <ProgressTemplate>
                            <center>
                                <%-- <asp:Image ID="loadingImage" runat="server" src="/_layouts/images/PDFLibrary/ajax-loader.gif"/> --%>
                                <div class="dim"></div>
                            </center>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

Css

.dim 
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:100 !important;
    background-color:black; 
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}

But how can I have a box in the center of the screen?



Solution :

Something as following?:

<div class="dim" runat="server">
    <span class="msg">Please wait...</span>
</div>

.dim
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:100 !important;
    background-color:black; 
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}

.dim .msg {
    display:inline-block;
    position: absolute;
    width: 200px
    height: 100px;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    margin: auto;
}

    CSS Howto..

    How to get relative CSS from photoshop artboard?

    CSS(3): How to display elements after each other

    How can change the style of
      tag in CSS

    How to make this kind of border css? [closed]

    How to detect IE8 separate from newer versions when IE8 compatibility set

    How can I achieve float left at bottom and float right at top with css flexbox?

    How to dynamically add .css to a custom Javafx LineChart Node?

    How to find unused CSS from rails? deadweight not working [closed]

    how to set css position absolute in hover state

    How do I set the background-image property to a linear gradient using jQuery's css method?

    How to change font color of select2 control using css

    How to print barcodes from a website based on a template? [duplicate]

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    Font-family not showing correctly on my website

    How to write conditional css?

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    I want all columns() in a
    have the equal length, how to achieve this?

    How to load local copy of bootstrap css when the cdn server is down?

    Hiding and showing elements with their respective styles in Javascript

    How can I use AngularJS directive to apply css style for a string?

    How to combine transforms in CSS?

    How to prioritize a CSS class?

    How to set the css property of dynamic data

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?

    How to make the main content div fill height of screen with css [duplicate]

    How to get text within div to be relative to the div's width and height, CSS, HTML

    How to add dynamic CSS style sheet for single xhtml file

    How to make a slider with divs and variable width?

    How to stop centering inside a table cell?