Web 窗体中的 Jquery 对话框

Jquery Dialogbox in webforms

本文关键字：Jquery 对话框 窗体 Web      更新时间：2023-09-26

我在Webforms中使用了这个插件。我的表单上有内容占位符，所以我将代码转换为以下内容：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function() {
    $('#<%=dialog.ClientID %>').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
        $('#<%=opener.ClientID %>').click(function() {
        $('#<%=dialog.ClientID %>').dialog("open");
        });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="dialog" runat="server" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button runat="server" id="opener">Open Dialog</button>

</asp:Content>

但它不起作用。我该如何解决这个问题？

<button> 元素在单击后将页面提交回服务器。这是它在表单（WebForms 页面是表单）中的默认行为，这就是您看不到对话框的原因。

您可以像这样向按钮添加type="button"：

<button runat="server" type="button" id="opener">Open Dialog</button>

它将阻止按钮将页面发布回服务器，您将能够看到对话框。

相关文章：