网页表单中的 Jquery 对话框答案

【问题标题】：Jquery Dialogbox in webforms网页表单中的 Jquery 对话框
【发布时间】：2015-02-11 00:46:44
【问题描述】：

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

但它不起作用。我该如何解决？

【问题讨论】：

“不工作”是什么意思？您预计会发生什么，实际发生了什么？
当我点击按钮时，我在屏幕上什么也看不到，只是在 div 上轻弹一些东西。我期待对话框。我已经在我的问题上发布了 URL，请看
我不熟悉 asp，因此问 - `$('#')` 的东西是否有效..？您可以在按钮单击事件中添加警报或其他内容并检查它是否有效..？您在控制台中是否有任何错误..？
@T J - 警报工作，我没有错误但收到一些警告。
确保按钮没有回发到服务器。尝试使用常规按钮而不是使其成为服务器控件以帮助避免回发。您也可以尝试将其设为常规并使用样式使其显示为按钮。

标签： javascript jquery asp.net jquery-ui webforms

【解决方案1】：

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

您可以像这样将type="button" 添加到您的按钮：

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

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

【讨论】：