2

我对 jQuery 很陌生。我对 SimpleModal 有疑问。

我试图关闭带有动画效果的弹出窗口，但失败了。

这是我的代码。

 $('#btnClose').click(function(e) {
            // Closing animations
            $("#content").modal({ onClose: function(dialog) {
                dialog.data.fadeOut('slow', function() {
                    dialog.container.hide('slow', function() {
                        dialog.overlay.slideUp('slow', function() {
                            $.modal.close();
                        });
                    });
                });
            }
            });

        });
<div id="content" style="display: none;">
    <h1>Basic Modal Dialog</h1>
    <a href='#' id="btnCloset">Close</a>
</div>

当我单击“关闭”链接时，没有任何反应。请问有什么帮助吗？非常感谢！

4

2 回答 2

3

原始，接受的答案

什么都没有发生，因为您在 HTML id 标记中拼写错误btnClose（您正在调用它btnCloset）。尽管如此，它不适用于提供的代码，因为它是这样做的：当您单击btnClose链接时，您正在创建一个 simpleModal 框#content，并告诉它当它关闭时，它应该执行onClose选项（这是正确的）。所以你实际上并没有告诉它在任何地方关闭，只是告诉它这是一个模式对话框。

相反，您应该像现在一样从元素中创建模式，但要与的 click 事件#content分开进行。#btnClose然后你应该绑定点击事件来关闭对话框。

这是一些代码

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

        }
     }
    );

    /* When #btnClose is clicked, close the modal */    
    $('#btnClose').click(function(e) {
        $.modal.close();
    });
});


附带说明，如果您将类添加simplemodal-close到#btnClose，simpleModal 将自动使其关闭对话框，您不必自己绑定点击事件。

基于反馈的新答案

好的，我误解了这个插件的工作原理，我认为它就像普通的 jQuery 对话框插件，但据我所知，目标是使现有的可见元素成为对话框，并在关闭它时将其转换回原始形式. 新代码跟踪对话框的状态（通过存储doOpen在data链接中并在每次单击时切换它）并打开和关闭对话框。希望这更接近您希望它的工作方式:)

$(function() {
    $("#btnClose")
    .data("doOpen", true)
    .click( function() {
        /* check whether or not we are to open or close the dialog */
        var doOpen = $(this).data("doOpen");
        /* toggle the data */
        $(this).data("doOpen", !doOpen);

        if (doOpen) {
            $("#content").modal({
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function () {
                        dialog.container.slideUp('slow', function () {
                            dialog.overlay.fadeOut('slow', function () {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });
        }
        else {
            $.modal.close();
        }
    });
});
于 2010-06-08T17:49:23.697 回答
1

这是代码，它运行良好。

$('#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();

        });
于 2010-06-08T23:55:23.833 回答