Hộp thoại Giao diện người dùng Jquery, được tô xám quá

Question

Tôi đang sử dụng hộp thoại giao diện người dùng jquery để sửa đổi hàng dữ liệu trong trang web ASP.NET, Khi mở hộp thoại tôi thêm hộp thoại vào biểu mẫu dưới đây, điều này mang lại cho tôi khả năng sử dụng đăng lại. $('#' + id).parent().appendTo($("form"));

Nhưng khi tôi đặt thuộc tính hộp thoại modal: true Không chỉ nền màu xám, hộp thoại cũng có màu xám và không thể truy cập được.

Nếu tôi xóa $('#' + id).parent().appendTo($("form")); nó hoạt động giống như nghĩa vụ phải nhưng sau đó tôi không thể sử dụng đăng lại.

Tôi đang làm điều gì đó sai hoặc tôi có bỏ lỡ một điểm để làm việc này không?

Javascript trong đầu .aspx

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#workDialog').dialog({ 
      autoOpen: false, 
      draggable: true, 
      resizable: false, 
      width: 800, 
      height: "auto", 
      modal: true 
     }); 
    }); 

    function showDialog(id) { 
     $('#' + id).parent().appendTo($("form")); 
     $('#' + id).dialog("open"); 
    } 

    function closeModalDiv(id) { 
     $('#' + id).dialog("close"); 
    } 
</script> 

Các div chứa thoại

<div id="workDialog" title="Basic dialog"> 
    <asp:UpdatePanel ID="upWorkDialog" runat="server" UpdateMode="Conditional"> <ContentTemplate> 
     <table id="Table1" class="item"> 
     <tr> 
      ... 
     </tr> 
     <tr> 
      <td><asp:TextBox ID="txt...></asp:TextBox></td> 
      <td><asp:TextBox ID="txt...></asp:TextBox></td> 
      <td><asp:TextBox ID="txt...></asp:TextBox></td> 
      <td><asp:TextBox ID="txt...></asp:TextBox></td> 
     </tr> 
     </table> 
     <asp:Label ID="lblWorkEditError" runat="server" Text=""></asp:Label> 

     <asp:Button ID="btnSave" runat="server" Text="Gem" OnClick="btnSave_Click" /> 
     <asp:Button ID="btnCancel" runat="server" Text="Annuller" OnClientClick="javascript:closeModalDiv('workDialog');" /> 
    </ContentTemplate></asp:UpdatePanel> 
</div> 

Answer 1

Đây là một lỗi được biết đến trong 1.10.0 và hoạt động tốt trong các phiên bản cũ nhưng tôi giải quyết nó bằng cách thay đổi z-index cho phong cách ui-thoại

add style sau trong stylesheet của bạn hoặc trên trang

.ui-dialog 
{ 
    z-index: 101; 
} 

HOẶC tìm .ui-hộp thoại trong jquery-ui-1.10.0 css và thêm "z-index: 101;" quy tắc kiểu

bây giờ tải lại trang và HOẠT ĐỘNG CNTT ...

Answer 2

Tôi đã thử và nó sẽ làm việc. Bạn có thể thử cho ý kiến ​​ra dòng

$('#' + id).parent().appendTo($("form")); 

Sửa nơi bạn khởi thoại của bạn để có những đối tượng trong một dlg2 biến

var dlg2 = $("#dialog1").dialog({ 
    autoOpen: false, 
    draggable: true, 
    resizable: false, 
    width: 800, 
    height: "auto", 
    modal: true, 
    open: function (type, data) { $(this).parent().appendTo("form"); } 
}); 

Thêm dòng này ngay lập tức sau khi bạn khởi thoại của bạn.

$(dlg2).parent().appendTo($("form")); 

Bạn chỉ có một hộp thoại? Bạn có thể thử khởi tạo nó trong việc kê khai thoại thêm mã mở:

$("#dialog1").dialog({ 
    autoOpen: false, 
    draggable: true, 
    resizable: false, 
    width: 800, 
    height: "auto", 
    modal: true, 
    open: function (type, data) { $(this).parent().appendTo("form"); } 
}); 

Link: jQuery UI Dialog with ASP.NET button postback

Answer 3

Dường như sau khi phiên bản 1.10.0, các workaround phương thức không hoạt động nữa. Bằng cách hạ cấp phiên bản giao diện người dùng jQuery xuống 1.9.2, nó sẽ hoạt động trở lại.

Answer 4

Đây là lỗi đã biết trong 1.10.0. Tôi đã giải quyết nó bằng cách thay đổi chỉ mục z cho lớp phủ.

$('#workDialog').dialog({ 
      modal: true, 
      width: 400, 
      height: 200, 
      appendTo: $("form:first") 
     }); 
     var dz = $(".ui-front").css("z-index") 
     $(".ui-widget-overlay").css({ "z-index": dz - 1 }); 
     $(".ui-widget-overlay").appendTo($("form:first")); 

Answer 5

Không được phép di chuyển hộp thoại sau khi được tạo. Tôi nghĩ rằng cách khắc phục dễ nhất và tốt nhất là di chuyển appendTo tới khởi tạo hộp thoại.

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#workDialog').dialog({ 
     autoOpen: false, 
     draggable: true, 
     resizable: false, 
     width: 800, 
     height: "auto", 
     modal: true, 
    appendTo: "#aspnetForm" // moved append to where the dialog i created 
    }); 
}); 

function showDialog(id) { 
    $('#' + id).dialog("open"); 
} 

function closeModalDiv(id) { 
    $('#' + id).dialog("close"); 
} 
</script> 

Answer 6

Mã chương trình dưới đây khắc phục vấn đề của bạn, làm việc cho tôi:

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#workDialog').dialog({ 
      autoOpen: false, 
      draggable: true, 
      resizable: false, 
      width: 800, 
      height: "auto", 
      modal: true, 
      appendTo: "form" 
     }); 
    }); 

    function showDialog(id) { 
     $('#' + id).dialog("open"); 
    } 

    function closeModalDiv(id) { 
     $('#' + id).dialog("close"); 
    } 
</script> 

Trong jQuery UI v1.10 họ thêm một tài sản appendTo, mà dường như làm điều tương tự như gọi .parent () .appendTo ($ ("form")). Hộp thoại xuất hiện trên nền xám. Và Đăng lại không hoạt động.

Answer 7

trên dòng thứ hai trong hàm showDialog, thêm bộ css cho chỉ mục z. Nên có dạng như sau:

function showDialog(id) { 
    $('#' + id).parent().appendTo($("form")); 
    $('#' + id).dialog("open").css({"z-index":"101"}); 
} 

Answer 8

Câu trả lời của Karsten làm việc cho tôi với một chút chỉnh sửa nhỏ. Tôi phải di chuyển $('#workDialog').dialog... sau $(".ui-widget-overlay").appendTo($("form:first"));