取消ajax modalpopupextender使用javascript

Question

我有一个modalpopupetentender targetcontrolid = buttCopyFormula。 buttCopyFormula封装在span标签中，供用户验证他们想要继续。该按钮还具有一个JavaScript函数，用于验证其中一个字段中是否有文本，以及是否将它放置在模式弹出窗口中的文本框中。

如果字段中没有文本，我想取消弹出窗口并显示一条消息。

我已经有了一段时间的按钮跨度，但我只是添加验证功能。我会想象有一个更好的方法来做到这一点，但只是不知道它是什么。

执行此功能的最佳方法是什么？

TargetControl按钮

<span onclick="return confirm('Copy the selected formula?')"> 
    <asp:ImageButton ID="buttCopyFormula" ImageAlign="AbsBottom" OnClientClick="transferName()" runat="server" ImageUrl="~/images2020/copy_32.png" /> 
    <b style="color:White">Copy</b> 
</span> 

模式弹出

<asp:ModalPopupExtender ID="ModalPopupExtender2" Y="20" runat="server" 
     BackgroundCssClass="modalBackground" CancelControlID="buttFormulaCancel" 
     PopupControlID="Panel2" TargetControlID="buttCopyFormula"> 
</asp:ModalPopupExtender> 

<asp:Panel ID="Panel2" runat="server" CssClass="modalQuestionBackground" 
     Style="display:none"><br /> 
     <h5>Enter a Name for the Formula</h5> 
     <br /><br /> 
     Formula Name:&nbsp; 
     <asp:TextBox ID="txtFormulaNameNew" CssClass="controltext" Width="65%" runat="server" Text=""></asp:TextBox><br /><br /> 
      <center> 
       <asp:Button ID="buttFormulaSaveNew" runat="server" CssClass="button" 
       OnClick="buttFormulaSaveNew_Click" Text="Save Formula" /> 
       &nbsp;&nbsp; 
       <asp:Button ID="buttFormulaCancel" runat="server" CssClass="button" 
       Text="Cancel" /> 
      </center> 
     <br /> 
     </asp:Panel> 

JavaScript函数

function transferName() { 
     var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value; 
     var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName"); 
     if (v === "") { 
      alert("Please select the formula you want to copy before proceeding"); 
      return false; 
     } 
     f.value = v 
    } 

我一直工作在这一点，首先去除跨度周围的按钮，放个假模式弹出窗口的超链接，并向弹出窗口添加行为ID。我也改变了JavaScript的如下...

新的JavaScript

function transferName() { 

     var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value; 
     var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName"); 
     if (f === "") { 
      alert("Please select the formula you want to copy before proceeding"); 
      return false; 
     } else { 
      if (confirm('Copy selected formula?')) { 
       f.value = v; 
       var mod = $find("ModalPopupExtender2"); 
       alert(mod.id.toString); 
       mod.show; 
       return false;} 
     } 
    } 

我仍然不能得到modalpopup显现。我想这是因为它被封装在更新面板中。有任何想法吗？？

Answer 1

您可以订阅ModelPopupExtender的showing事件并根据某些条件取消显示。在网页脚本把下面ScriptManager控件

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); 

function pageLoadedHandler(sender, args){ 
    var popupExtender = $find("ModalPopupExtender2"); // BehaviorId of popup extender 
    popupExtender.remove_showing(onPopupShowing); 
    popupExtender.add_showing(onPopupShowing); 
} 

function onPopupShowing(sender, args) { 
    var txtFormulaNameNew; 
    var txtFormulaName = $get("<%= txtFormulaName.ClientID %>"); 

    if (formulaTextBox.value.length === 0) { 
     alert("Please select the formula you want to copy before proceeding"); 
     args.set_cancel(true); 
    } else { 
     if (confirm('Copy selected formula?')) { 
      txtFormulaNameNew = $get("<%= txtFormulaNameNew.ClientID %>"); 
      txtFormulaNameNew.value = txtFormulaName.value; 
     } 
    } 
}