Home/ Questions/Q 6727079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:00:20+00:00

i am working with jquery dialog and my div is show through dialog. my

  • 0

i am working with jquery dialog and my div is show through dialog. my div has a simple css what has background image that should come at center on the div. but when dialog is open then image is showing but at left side not at center. i am not being able to sort this problem. plzz need help. basically i want to show the image at the center on the dialog.

here is my code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
 <link href="../Styles/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

 <script src="../Scripts/jquery.min.js" type="text/javascript"></script>
 <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
 .BusyStyles
 {
        background-image: url('../images/ajax-loader.gif');
        background-repeat: no-repeat; background-position: center center; 
        height: 150px;
        width: 250px;
 }
 </style>

 <script language="javascript" type="text/javascript">
  $(document).ready(function () {

     var _images = ['../images/ajax-loader.gif'];
     $.each(_images, function (e) {
         $(new Image()).load(function () {
             //alert($(this).attr('src') + 'has loaded!');
         }).attr('src', this);
     });

     $("#dialog").dialog({
         autoOpen: false,
         height: 150,
         width: 250,
         modal: false,
         draggable: false,
         resizable: false,

         show: {
             effect: "fade",
             duration: 2000
         },
         hide: {
             effect: "fade",
             duration: 500
         }

     });

     $("#btnOpen").click(function () {
         $('#dialog').html('<img  src="../images/ajax-loader.gif" border="0" />');
         $("#dialog").dialog("open");
         return false;
     });

     $("#btnClose").click(function () {
         $("#dialog").dialog("close");
         return false;
     });

 }); // doc end
 </script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialog" class="BusyStyles">
</div>
<asp:Button ID="btnOpen" runat="server" Text="Open" />

</form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To center horizontally and vertically, in your CSS, add the style 

    #dialog {
 text-align:center;
 padding-top: 22px; /* you can use a padding to vertically center*/
}

    Edit :
    Remove the
    $('#dialog').html('<img src="image.GIF" border="0" />');
    because in the BusyStyles Css you already declare a background witch is already center center (and works fine)

    • 0