Question

我正在使用jquery对话框，我的div通过对话框显示。我的div有一个简单的CSS有什么背景图像应该在div的中心。但是当对话框打开时，图像显示但左侧不在中心。我无法解决这个问题。 plzz需要帮助。基本上我想在对话框的中心显示图像。

这是我的代码

<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>

Answer 1

要水平和垂直居中，请在CSS中添加样式

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

修改： 除掉 $('#dialog').html('<img src="image.GIF" border="0" />'); 因为在 BusyStyles Css中你已经声明了一个背景女巫已经center center（并且工作正常）

jquery对话框和css问题给予痛苦

1 个答案: