Question

我有以下代码。

 $(document).ready(function() {
        $('#btnOpen').click(function(e) {
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });
        $('#btnClose').click(function(e) {
            $.modal.close();
        });

如果我使用<a hrf ="#" id="btnOpen">Open</a>，它的效果非常好。如果我用ASP.net按钮替换，
<asp:Button ID="btnOpen" runat="server" Text="Open" />，什么都没发生......请帮忙吗？

Answer 1

ASP.Net将根据控件的容器自动为服务器端控件生成唯一ID。

因此，生成的HTML实际上没有#btnOpen元素。

您需要使用ASP.Net生成的客户端ID，如下所示：

$('#<%= btnOpen.ClientID %>').click(...);

或者，在ASP.Net 4.0中，您可以设置控件的ClientIDMode property以防止ASP.Net生成唯一ID：

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" />

Answer 2

问题是ASP.Net控件将父容器的名称附加到它们的ID，因此如果在生成的页面上执行视图HTML源，您将看到该按钮的ID不是btnOpen而是parentContainerID_btnOpen。

如果您使用的是ASP.Net 4，则可以通过设置选项使按钮不附加父控件名称，否则您需要更改javascript代码以使用正确的ID。

Answer 3

以下是工作代码：

$('#<%= btnOpen.ClientID %>').click(function(e) {
            e.preventDefault();
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });

只有两项更改 1：我已将名称更改为('#<%= btnOpen.ClientID %>').click(...); 2：我添加了e.preventDefault();

但是，不允许从asp按钮回发

SimpleModal，ASP.NET按钮没有响应

3 个答案: