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 set width of DIV to span with text inside it (so not fixed)

    How can i overlap inline divs?

    how to repeat a small background image througout the page?

    How to change table cell colour to default on triple click html5/javascript/css

    How to remove all input outline?

    CSS how can i turn the scrolling off during the animation?

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How to change CSS background-position for the X axis only? [duplicate]

    CSS: How to position child divs in main div side by side

    Show Child Div Above Elements on Parent Div Level using z-index

    How can I get rid of one animation in a media query?

    How to prevent javascript and css messing up?

    How to make cards on the image

    how to toggle image in HTML-CSS? [duplicate]

    How to remove “left” value bootstrap popover

    How to transform to <%= link_to %> with css?

    In order to output in erb exactly what you have in your original html, you could use the following: <li> <%= link_to user_path do %> <span>User</span> <% end %> </li>...
    Read more

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How to test a web designer on css layouts?

    how to add a css class to a list when the particular li is clicked using jquery?

    SCSS/SASS how apply style for all pseudo selectors

    css floating problem: how to get a left float to wrap around a right float

    how to use namespaces in css?

    I would like to know how can i do tab spaces after a word so that the pattern that comes after that would be align with each other

    How to replicate PS multiply layer mode

    How do you implement CSS without to have clear:both on float left and float right

    How would I get an img element to render under a background-image in CSS

    How to stop breaking tables border when page is spliting?

    How does this site hide the iframe scrollbar?

    How to align an image of any size from the centre, rather than the top/bottom/sides, using css

    how to align an 'a' element in html/css