鏈接按鈕將無法使用JQuery模式窗體

Question

我有一個JQuery模式窗體與4個圖像按鈕。當模式框打開，我點擊這些按鈕，然後沒有任何反應。我知道，當箱子打開時，它會移出窗體，但我不知道如何恢復。我已經嘗試了幾個變種.parent（）。appendTo（$（「form」））;並以許多不同的方式改變了這種情況，但沒有成功。目前，當我使用該框打開，但整個屏幕變暗，我不能點擊按鈕。這裏是我的jQuery函數：

<script type="text/javascript"> 
    $(function() { 
     $("#Change").dialog({ 
      resizable: false, 
      draggable: false, 
      width: 800, 
      modal: true, 
      show: { effect: 'fadeIn', duration: 500 }, 
      hide: { effect: 'fadeOut', duration: 300 }, 
      autoOpen: false, 
      open: function (type, data) { 
       $(this).parent().appendTo($("form")); 
      } 
     }); 

     $("#ui-dialog-title-dialog").hide(); 
     $(".ui-dialog-titlebar").removeClass('ui-widget-header'); 

     $("#openChange1").click(function() { 
      $("#<%=txtCardChange.ClientID %>").val("1"); 
      $("#Change").dialog("open"); 
      $('.ui-widget-overlay').live("click", function() { 
       $("#Change").dialog("close"); 

      }); 
      return false; 
     }); 

    }); 
</script> 

如果這裏需要的是我的HTML調用模式窗體：

<a id="openChange1" href="#" style="color: Red">Change Card</a> 

的模式窗體的HTML是隻是一個簡單的div標籤內：

 <div id="Change"> 
      \\html here 
     </div> 

所以，任何幫助將不勝感激。如果需要，我使用Visual Studio 2012和.NET 4.0。按鈕後面的代碼是用C＃編寫的。感謝您的時間。

Answer 1

正如你提到的，JQuery的移動對話框的內容到頁面主體的直接孩子解決一些渲染問題：http://forum.jquery.com/topic/preventing-dialog-from-rearranging-dom-flow

的問題是，如果立即移動的按鈕後面， 'overlay'div用於使屏幕的其餘部分變暗並使對話模式（即點擊事件）防止按鈕點擊發生在原始位置。

一個解決方案是使用您的Change div的克隆模式和綁定點擊處理程序，調用原始按鈕上的click（）。

另一種選擇是有按鈕調用.NET的回傳方法，而不是讓普通的HTML表單辦提交：

__doPostBack("ctl00$button_name_here"); 

Answer 2

<asp:LinkButton runat="server" id="openChange1" onclientclick="openChange1Click()" /> 

<script type="text/javascript"> 
function openChange1Click() { 
     $("#<%=txtCardChange.ClientID %>").val("1"); 
     $("#Change").dialog("open"); 
     $('.ui-widget-overlay').live("click", function() { 
      $("#Change").dialog("close"); 

     }); 
     return false; 
    } 
</script> 

Answer 3

明白了，感謝您的幫助，它把我領到了正確的方向。

$(function() { 
     $("#Change").dialog({ 
      resizable: false, 
      draggable: false, 
      width: 400, 
      modal: true, 
      show: { effect: 'fadeIn', duration: 500 }, 
      hide: { effect: 'fadeOut', duration: 500 }, 
      autoOpen: false, 
      open: function (type, data) { 
       $(this).parent().appendTo("form:first"); 
      } 
     }).parent().css('z-index', '1005'); 

     $("#ui-dialog-title-dialog").hide(); 
     $(".ui-dialog-titlebar").removeClass('ui-widget-header'); 
     $("#Change").hide().show(); 

     $("#openChange1").click(function() { 
      $("#<%=txtCardChange.ClientID %>").val("1"); 
      $("#Change").dialog("open"); 
      $('.ui-widget-overlay').live("click", function() { 
       $("#Change").dialog("close"); 
      }); 
      return false; 
     }); 
    }); 

Answer 4

我有我解決了如下相同的問題：

<script type="text/javascript"> 
    $(function() { 
     $("#Change").dialog({ 
      resizable: false, 
      draggable: false, 
      width: 800, 
      modal: true, 
      show: { effect: 'fadeIn', duration: 500 }, 
      hide: { effect: 'fadeOut', duration: 300 }, 
      autoOpen: false, 
      appendTo: "form" 
     }); 

     $("#ui-dialog-title-dialog").hide(); 
     $(".ui-dialog-titlebar").removeClass('ui-widget-header'); 

     $("#openChange1").click(function() { 
      $("#<%=txtCardChange.ClientID %>").val("1"); 
      $("#Change").dialog("open"); 
      $('.ui-widget-overlay').live("click", function() { 
       $("#Change").dialog("close"); 

      }); 
      return false; 
     }); 

    }); 
</script> 

在jQuery UI的V1.10他們增加了一個appendTo屬性，它似乎做同樣的事情，調用.parent（）。 appendTo（$（ 「形式」））。該對話框出現在灰色背景的頂部。郵政回來確實有效。