如何防止jQuery UI对话框修改背景布局？

我正在使用jQuery UI在页面加载时提供模式窗口。这工作得很好，但是，背景布局与应该的方式相比是混乱的。如何防止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

是否可行吃点蛋糕吃吧？

谢谢。

来源

2010-10-20 fmz

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

$（文件）。就绪（函数（）{

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规则。像国有悬停，妇女参与发展get-ui等...你有他们在jQuery的css文件和base.css文件中定义。你需要拿出你不需要的东西。

jQuery UI对话框插件使用jQuery UI CSS框架来设计其外观和风格，包括颜色和背景纹理。我们建议使用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>

来源

2010-10-20 16:44:54 Matt

嗨马特。看起来像服务器问题。我会试一试，让你知道它是怎么回事。谢谢。 – fmz 2010-10-20 16:50:10

服务器现在可以。但没有去。 – fmz 2010-10-20 17:52:16

Matt。谢谢您的帮助。 – fmz 2010-10-20 19:03:18

如何防止jQuery UI对话框修改背景布局？

回答

相关问题