Question

我正在使用jQuery UI在页面加载时提供模态窗口。这样可以正常工作，但背景布局与应该的方式相比有些混乱。

以下是对话框代码：

<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

这是jQuery：

$(function(){
                // Dialog           
                $('#dialog').dialog({
                    autoOpen: true,
                    width: 300,
                    buttons: {
                        "Ok": function() { 
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    }
                });

                // Dialog Link
                $('#dialog_link').click(function(){
                    $('#dialog').dialog('open');
                    return false;
                });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });

以下是页面的外观：http://www.rutlandinc.com/

这就是jquery对话框的外观：http://www.rutlandinc.com/index2.html

是否可以吃蛋糕并吃它？

感谢。

Answer 1

可能需要使用ready函数。您需要在文档准备好时加载它。

$（document）.ready（function（）{

http://api.jquery.com/ready/

您的网站加载速度非常慢，所以我甚至无法查看源代码。但是试一试。

必须是其他东西，因为这确实有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


<link type="text/css" href="jquery-ui-1.8.5.custom.css" rel="stylesheet" /> 

        <script type="text/javascript">
            $(document).ready(function (){
                // Dialog           
                $('#dialog').dialog({
                    autoOpen: true,
                    width: 300,
                    buttons: {
                        "Ok": function() { 
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    }
                });

                // Dialog Link
                $('#dialog_link').click(function(){
                    $('#dialog').dialog('open');
                    return false;
                });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });
        </script>
        <style type="text/css">
            /*demo page css*/
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>    


<style type="text/css">
<!--
.style2 {
    font-size: 12px
}
-->
</style>


</head>

<body class="home">
      <div id="dialog" title="Dialog Title">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>


</body>
</html>

好吧这是一个CSS问题。 jquery ui使用一些通用的css规则。就像state-hover，widget-ui等...你可以在jquery css文件和base.css文件中定义它们。你需要拿出你不需要的东西。

jQuery UI Dialog插件使用jQuery UI CSS Framework来设计其外观，包括颜色和背景纹理。我们建议使用ThemeRoller工具来创建和下载易于构建和维护的自定义主题。

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.
Sample markup with jQuery UI CSS Framework classes
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

如何防止jQuery UI Dialog修改背景布局？

1 个答案: