Question

i want that when LightFace will be shown then a busy image should come and display at the center of the modal box. i found there is no way to show LightFace with busy image programatically when content will be loading in the background. so i used a trick but did not work. in my case busy image shows in the dialog but not at center position.

here is my code

here i define a style sheet for my div

.BusyStyles

{
background-image: url(‘images/fbloader.gif’);
background-repeat: no-repeat; background-position: center center;
height: 200;
width: 300;
}

my JavaScript is

    <script language="javascript" type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#btnFeedback1").click(function () {
            var modal = new LightFace({
                draggable: true,
                height: 200,
                width: 300,
                title: 'My Profile',
                content: '<div css="BusyStyles"><div>',
                buttons: [
                { title: 'OK', event: function () { this.close(); } },
                { title: 'Close', event: function () { this.close(); } }
            ]
            });

            modal.open();
            modal.load('here i will load my ajax content calling pagemethod');
            return false;
        });
    });

so what i have done that when i am showing LightFace modal dialog then a div is assigned as default content which has stylesheet. the style sheet has fixed height and width and as background image. i was trying to show the image at the center but image is not showing at the center instead image is showing at left top position.

so please guide me that how can show busy image at the center of the dialog.

basically i want that when i will call server side function by jquery then my dialog should show with busy image and when content will be available then i will show that content.
i am using asp.net and calling page method by jquery.

please guide me. thanks.

Answer 1

Its

<div class="BusyStyles"><div>

and not

<div css="BusyStyles"><div>

Maybe this fixes your background issue…