在用户控件中放置 ajax ModalPopupExtender

Question

我在许多页面上使用 ajax ModalPopupExtender 来显示确认对话框。

所以我想通过将相同的代码放在使用控件中来在所有页面上重用相同的代码。 但我不确定是否可以从 javascript 访问此用户控件（我不想要服务器端操作）。

这是负责弹出显示的代码，我想放在用户控件中：

<script language="javascript" type="text/javascript">
    var _source;
    var _popup;
    var _btn;
    var _div;

    function showConfirm(source, btnID, theDiv) {

        this._source = source;
        this._btn = btnID;
        this._div = theDiv;

        document.getElementById(btnID).click();   
        document.getElementById(theDiv).style.visibility = 'visible';
    }

        function okClick() {

            document.getElementById(_div).style.visibility = 'hidden';
            __doPostBack(this._source.name, '');
        }

        function cancelClick() {
            document.getElementById(_div).style.visibility = 'hidden';
            this._source = null;
        }
    </script>


 <cc1:ModalPopupExtender ID="modal" runat="server"
        TargetControlID="theButton" PopupControlID="div"
        OkControlID="btnOk" OnOkScript="okClick();" CancelControlID="btnNo"
        OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />

 <div id="div" runat="server" align="center" class="confirm" style="display: none">
    <img align="absmiddle" src="../images/warning.jpg" />Are you sure you want to delete this item?
    </br>
    <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
    <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
 </div>

在“托管”页面上，我想将 JS 分配给将触发弹出窗口的按钮： 这是我现在拥有的代码（应该被用户控件采用）：

string s = string.Format("showConfirm(this,'{0}','{1}');return false;", theButton.ClientID, div.ClientID);            
btn.OnClientClick = s;

Answer 1

可以从 javascript 调用模态弹出扩展器，因为模态弹出控件只是另一个 DOM 元素。您只需要知道一个可以选择项目的选择器。

要从 javascript “显示”您的模态弹出扩展器，您需要做的就是将一些脚本添加到您的母版页、用户控件或显示作为模态弹出扩展器的 dom 元素的页面。

或者，您可以使用 javascript 框架，该框架具有许多其他样式的模态对话框，它们与 ajax 模态弹出扩展器同样（如果不是更多）有用。考虑到您不想使用 ASP.NET 的服务器端代码功能，这可能与您尝试实现的目标更相关。