0

我终于解决了我在使用 AJAX 和 jQuery 模式框时遇到的问题。

现在我只想添加典型效果......但我不知道代码。

效果一：当模态框打开时，我想让“背景”淡出

效果二：当你点击X关闭盒子时，我希望它慢慢褪色

看：

<script src="js/simplemodal.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#message-sent').hide();
        $('#contact-form').submit(function() {
            $.ajax({
                type: "POST",
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function() {
                    $("#message-sent").modal({
                        onOpen: function(dialog) {
                            dialog.overlay.fadeIn('slow', function () {
                                dialog.container.fadeIn('slow', function () {
                                    dialog.data.fadeIn('slow');
                                });
                            });
                        },
                        onClose: function (dialog) {
                            dialog.data.fadeOut('slow', function () {
                                dialog.container.fadeOut('slow', function () {
                                    dialog.overlay.fadeOut('slow', function () {
                                        $.modal.close();
                                    });
                                });
                            });
                        },
                        closeClass: 'close-btn'
                    });
                }
            });
            $('#contact-form')[0].reset();
            return false;
        });
    });
</script>
4

1 回答 1

0

您正在查看的是使用 SimpleModal 中内置的选项来实现您所需要的。

这部分代码：

success: function() {
    $("#message-sent").fadeIn().modal({
         closeClass: 'close-btn'
    });
}

应该修改为使用 SimpleModal 提供的内置结构来启动模态框。这dialog.overlay.fadeIn()是您正在寻找使背景褪色的内容：

success: function() {
    $("#message-sent").modal({
        onOpen: function(dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.container.fadeIn('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });
        }
    });
}

至于关闭模态框，您可以调用以关闭模态框，或者为您希望允许模态框在单击时关闭的任何元素$.modal.close();分配一个类。simplemodal-closeSimpleModal 将自动将关闭操作绑定到它们。

您还可以使用以下命令在结束时添加动画：

onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.fadeOut('slow', function () {
            dialog.overlay.fadeOut('slow', function () {
                $.modal.close();
            });
        });
    });
}
于 2013-03-07T00:42:26.560 回答