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，并告诉它当它关闭时，它应该执行 onClose 选项中的操作（这是正确的）。所以你实际上并没有告诉它关闭任何地方，只是告诉它这是一个模式对话框。

相反，您应该像现在一样从 #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();
    });
});

---

As a side note, if you add the class simplemodal-close to #btnClose, simpleModal will automatically make it close the dialog, and you don't have to bind the click event yourself.

New answer based on feedback

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

Answer 2

这是代码，它运行得很好。

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

        });