JQuery模式對話框：覆蓋不可見

我是JQuery的新手。我正在開發一個ASP.Net MVC應用程序。在其中一個視圖中，我試圖打開一個JQuery模式對話框。以下是此JQuery模式對話框：覆蓋不可見

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript" /> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript" /> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"/> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"/> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"/> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $(".openDialogLink"). 
     live("click", function (e) 
     { 
      e.preventDefault(); 
      $("<div></div>").addClass("dialogBoxDiv").appendTo("body"). 
      dialog(
      { 
       modal: true, 
       draggable: true, 
       overlay: { backgroundColor: "#000000", opacity: 0.5 }, 
       title: $(this).attr("DialogTitle"), 
       show: "puff", 
       hide: "puff", 
       closeOnEscape: true, 
       close: function() 
       { 
        $(this).remove() 
       }, 
      } 
      ).load(this.href); 
     }); 
     $(".close"). 
     live("click", function (e) 
     { 
      e.preventDefault(); 
      $(this).closest(".dialog").dialog("close"); 
     }); 
    });

問題的JavaScript代碼是在網頁上未使用的區域覆蓋是不可見的。看起來像是我缺少一些小設置。

幫助請。

來源

2011-09-05 Maheep

您的疊加層位於您的標記中？假設它有一個面具的div。我有覆蓋層不會顯示的問題，除非它在主頁面/佈局上。 –

我沒有在HTML標記中添加任何覆蓋div。我認爲JQuery對話框中的疊加屬性是我們需要使用的屬性，因此將其設置爲覆蓋：{backgroundColor：「＃000000」，opacity：0.5}。不是嗎？ – Maheep

是的。但通常在jQuery模態中，頁面末尾有一個隱藏的div。再次檢查指南，看看你是否錯過了任何標記。 –

它似乎與背景覆蓋工作正常。

http://jsfiddle.net/8bwNU/

的jQuery的UI CSS樣式表使用的圖像爲你使用jQuery的東西。如果您還沒有其他地方，可能需要添加css文件...您可以從here下載所需的組件。

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

該zip文件將包含一個css文件，相關圖像和jQuery-ui JavaScript文件（您當前正在使用）。 css會在名爲'images'的文件夾中查找一些圖像，只要圖像位於名爲images的文件夾中的解決方案中，並且您引用了您的css，它就會應用背景疊加。

來源

2011-09-06 01:11:08

感謝您的詳細闡述。是的，我錯過了我的視圖中的CSS參考。問題解決了。非常感謝。 – Maheep

沒問題@Maheep :) –

JQuery模式對話框：覆蓋不可見

回答

相關問題