jquery - SimpleModal，如何用动画关闭弹出窗口

Question

我对 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>

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

Answer 1

原始的、已接受的答案

没有发生任何事情，因为您在 HTML id 标记中拼错了 btnClose(您将其称为 btnCloset)。尽管如此，它不适用于提供的代码，因为它的作用是这样的:当您单击 btnClose 链接时，您将使用 #content 创建一个 simpleModal 框>，并告诉它当它关闭时，它应该执行 onClose 选项中的操作(这是正确的)。所以你实际上并没有告诉它关闭任何地方，只是告诉它这是一个模式对话框。

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

这是一些代码

$(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 会自动使其关闭对话框，并且您不必绑定(bind)点击自己事件。

基于反馈的新答案

好吧，我误解了这个插件的工作原理，我以为它就像普通的 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();
        }
    });
});