ajaxToolkit:ModalPopupExtender演示及实现代码

请允许我详细讲解“ajaxToolkit:ModalPopupExtender演示及实现代码”的完整攻略。

什么是ModalPopupExtender？

ModalPopupExtender 是 Ajax Control Toolkit 提供的一种扩展控件，可以实现弹出模态窗口的效果，且在模态窗口不同于常规窗口的背景模糊显示。这种扩展控件通常用于提示用户进行的操作或确认信息的展示，可以有效地优化网站的用户体验。

需要的前置条件

需要安装 AjaxControlToolkit 扩展包；
在 ASP.NET Web 应用程序中要添加 AjaxControlToolkit 的引用；
ModalPopupExtender 必须包含在 asp:ToolkitScriptManager 控制中。
使用前请确保页面类型为 WebForm

如何使用ModalPopupExtender？

确定页面上需要弹出模态窗口的元素（按钮、超链接等），设置其属性 data-modal 值为弹出框中包含内容元素的 Id 值。

示例代码：

<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" data-modal="divContent" />

在 HTML 中添加模态框元素，Id 值与步骤 1 中的 data-modal 相同，且该元素要设置 style="display:none;"，表示一开始该模态框元素不可见；

示例代码：

<div id="divContent" style="display:none;">
  <!--此处添加需要弹出的模态框内容-->
</div>

在 <head> 标签中的 script 标签中添加 ModalPopupExtender 的引用，并设置 popupControlID 与要弹出的模态框元素 ID 相同，TargetControlId 与数据劫持的元素（按钮、超链接等）的 ID 相同。

示例代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/4.6.1/1/MicrosoftAjax.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/4.6.1/1/MicrosoftAjaxWebForms.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/ajaxcontroltoolkit/18.1.0/ajaxcontroltoolkit.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 确认弹窗示例
        $('.confirm').click(function () {
            var yes = $(this).data('yes');
            $('#yesBtn').attr('href', yes);
            $("#divConfirm").dialog({
                modal: true,
                autoOpen: false,
                closeText: "",
                show: {
                    effect: "blind",
                    duration: 200,
                },
                hide: {
                    effect: "explode",
                    duration: 200,
                }
            });
            $("#divConfirm").dialog("open");
            return false;
        });
        // 取消弹窗
        $('.cancel').click(function () {
            var no = $(this).data('no');
            $('#noBtn').attr('href', no);
            $("#divCancel").dialog({
                modal: true,
                autoOpen: false,
                closeText: "",
                show: {
                    effect: "blind",
                    duration: 200,
                },
                hide: {
                    effect: "explode",
                    duration: 200,
                }
            });
            $("#divCancel").dialog("open");
            return false;
        });
    });

    function refreshParent() {
        window.parent.$("#btnSearch").trigger("click");
    }
</script>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="True">
</asp:ToolkitScriptManager>
<!--确认提示框-->
<div id="divConfirm" style="display: none;">
    <p>您确定要执行该操作吗？</p>
    <p>
        <asp:HyperLink runat="server" ID="yesBtn" CssClass="btn btn-sm btn-warning mr-3" Text="是" /><asp:HyperLink runat="server" ID="noBtn" CssClass="btn btn-sm btn-secondary" Text="否" />
    </p>
</div>

示例说明：上述示例代码演示了如何在网页中实现确认弹窗的效果，用户点击触发弹窗的按钮后提示确认信息，用户根据自身需要选择是否执行操作。

ModalPopupExtender 的常用属性

ModalPopupExtender 控件提供了很多属性，包括以下一些常用的：

PopupControlID：必须指定的属性，在页面中元素的 Id 值。控制显示的 PopupPanel 的 ID 值；
TargetControlID：需要设定 data-modal 值的元素（一般是按钮或超链接）的 ID 值；
CancelControlID：指定关闭模态窗口的按钮 ID 值；
BackgroundCssClass：指定背景模糊的样式；
DropShadow：指定是否在弹出窗口周围添加投影效果；
RepositionMode：指定模态窗口显示位置的方式（Absolute 或 Fixed）；
RepositionWhenModal：实际显示时是否重新定位弹出层。

总结

以上就是有关 AJAX Control Toolkit 的 ModalPopupExtender 的实现攻略。通常采用 'data-modal' 自定义属性来指定需要弹出的模态框元素，PopupControlID 属性与 TargetControlID 属性需要分别填充需要弹出框的 Id 值与数据劫持元素（一般是按钮或超链接）的 Id 值。此外，根据实际情况，还可以添加其他属性来优化用户体验，例如指定关闭模态窗口的按钮 ID 值、指定背景模糊的样式、指定是否在弹出窗口周围添加投影效果等等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ajaxToolkit:ModalPopupExtender演示及实现代码 - Python技术站

ajaxToolkit:ModalPopupExtender演示及实现代码

什么是ModalPopupExtender？

需要的前置条件

如何使用ModalPopupExtender？

ModalPopupExtender 的常用属性

总结

相关文章