2016-08-01 94 views
2

我的代碼是有點像這樣:如何打開一個jQuery的對話框彈出點擊複選框時,恢復按鈕被點擊

function ShowPopUpRestore() { 
     var returnval = 1; 
     var hddnField = document.getElementById(<%=hdnSelectedRows.ClientID%>"); 
     if (hddnField.value != 0) { 
      returnVal = 0; 
      $('<div></div>').appendTo('body') 
           .html('<div><align="left"> </br>' + '<%= this.GetMessage("Msg1595")%>' + '</h6></div>') 
           .dialog({ 
            resizable: false, 
            modal: true, 
            title: "", 
            height: 150, 
            width: 475, 
            buttons: { 
             Yes: function() { 
              // //__doPostBack(mDdlSurgeryListRE.name, ''); 

              $(this).dialog("close"); 
             }, 
             "No": function() {           

              $(this).dialog('close'); 
             } 
            }, 
            close: function (event, ui) { 
             $(this).remove(); 
            } 
           }).prev(".ui-dialog-titlebar").css("background", "#4E2D1D"); 
          }        
        return false; 
    } 

我的數據,假設一個處於掛起模式,我希望它是在活躍模式,所以我試圖通過點擊恢復按鈕來恢復它。 當我點擊複選框,並試圖點擊恢復按鈕,彈出應該來有「是」 /「不」按鈕:

  • 如果我點擊「是」,那麼數據選中的項目將恢復到活動模式。
  • 如果我點擊'否',那麼它應該保持暫停模式。

它可以對多個複選框(數據)有效。謝謝。

回答

1

這真的只是簡單jQuery中創建下列事件和綁定他們叫ShowPopUpRestore():

  1. 對於恢復按鈕創建一個click()事件。
  2. 對於該複選框創建一個change()事件。

完整的示例:

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript"> 
     $(function() { 

      $("#btnRestore").click(function() { 
       ShowPopUpRestore(); 
      }); 

      $("#chkBtn").change(function() { 
       ShowPopUpRestore(); 
      }); 

      function ShowPopUpRestore() { 
       var returnval = 1; 
       var hddnField = document.getElementById("<%=hdnSelectedRows.ClientID%>"); 
       if (hddnField.value != 0) { 
        returnVal = 0; 
        $('<div></div>').appendTo('body').html('<div><align="left"></br>' + '<%= this.GetMessage("Msg1595")%>' + '</h6></div>') 
            .dialog({ 
             resizable: false, 
             modal: true, 
             title: "", 
             height: 150, 
             width: 475, 
             buttons: { 
              Yes: function() { 
               $(this).dialog("close"); 
               alert('You clicked YES'); 
              }, 
              "No": function() { 
               $(this).dialog('close'); 
               alert('You clicked NO'); 
              } 
             }, 
             close: function (event, ui) { 
              $(this).remove(); 
             } 
            }).prev(".ui-dialog-titlebar").css("background", "#4E2D1D"); 
       } 
       return false; 
      } 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <input type="button" id="btnRestore" value="Restore" /> 
     <input type="checkbox" id="chkBtn" value="Check box" /> 
     <asp:HiddenField ID="hdnSelectedRows" runat="server" Value="1" /> 
    </form> 
</body> 
+0

當我點擊恢復按鈕,這時會彈出來了,沒有時間內去。它不會等待或允許用戶點擊「是」/「否」按鈕 –

+0

然後在您的網頁中有一些額外的邏輯,它立即關閉彈出窗口。複製並粘貼我貼出的代碼,與沒有額外的邏輯,你會看到它的工作原理。然後,一旦它的工作緩慢開始將其餘的代碼添加回網頁 –

+0

您好,丹尼斯,我試過這樣做,但它沒有工作。是否有任何替代解決方案這個問題。 –

相關問題