javascript - Web 表单中的 Jquery 对话框

Question

我用过这个Plugin in 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>

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

Answer 1

<button>元素被单击后将页面提交回服务器。这是它在表单内的默认行为(Webforms 页面就是一个表单)，这就是您看不到该对话框的原因。

您只需添加 type="button"像这样的按钮:

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

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