如何防止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對話框修改背景佈局？

回答

相關問題