Question

我终于解决了我在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>

Answer 1

您正在研究的是使用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-close类。 SimpleModal会自动将关闭动作绑定到它们。

您还可以使用以下内容向关闭添加动画：

onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.fadeOut('slow', function () {
            dialog.overlay.fadeOut('slow', function () {
                $.modal.close();
            });
        });
    });
}

jQuery特效：当模态框打开和关闭时

1 个答案: