Question

我是jQuery的新手。我对SimpleModal有一个questino。

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

这是我的代码。

 $('#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的点击事件分开。然后你应该绑定click事件来关闭对话框。

这是一些代码

$(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将自动使其关闭对话框，您不必自己绑定click事件。

基于反馈的新答案

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

        });

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

2 个答案: