首页 \ 问答 \ jQuery效果:当模态框打开和关闭时(jQuery effects: when modal box opens and when it closes)

jQuery效果:当模态框打开和关闭时(jQuery effects: when modal box opens and when it closes)

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

I have finally ended fixing a problem I had with AJAX and jQuery modal box.

Now I just want to add the tipical effects... but I don't know the code.

effect one: when the modal box opens, I want the "background" to fade

effect two: when you hit the X to close the box, I want it to fade slowly

Look:

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

原文:https://stackoverflow.com/questions/15260887
更新时间:2020-10-17 10:10

最满意答案

您正在研究的是使用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();
            });
        });
    });
}

What you're looking at would be to use the options built into SimpleModal to achieve what you need.

This section of code:

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

should be modified to use the built-in structure provided by SimpleModal to launch the modal box. The dialog.overlay.fadeIn() is what you're looking at to make the background fade:

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

As for closing the modal box, you can call $.modal.close(); to close the modal box, or assign a simplemodal-close class to any element that you wish to allow the modal box to close upon clicking. SimpleModal wil automatically bind the close action to them.

You can also add animations to the close, using the following:

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

相关问答

更多

模态打开时播放视频,关闭时暂停播放(Play video when modal opens, pause when it closes)

由于您使用的是Bootstrap模式,因此您可以挂钩其hidden.bs.modal事件以暂停视频: $('.modal').on('hidden.bs.modal', function () { $('.video')[0].pause(); }); 以下是此方法的演示: $('.modal').on('hidden.bs.modal', function () { $('.video')[0].pause(); }); <script src="http://code.j ...

Bootstrap模态外部内容在模态之外打开(Bootstrap Modal External Content opens outside of modal)

为了在Bootstrap模式中打开远程站点,我不得不将它放在iFrame中,如下所示: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Document Management</h4> ...

js模态框关闭功能(js modal box close function)

我想这就是你想要的: <!DOCTYPE html> <html> <head> <style> /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box ...

Colorbox模态打开/关闭另一个Colorbox模态(Colorbox modal opening/closing another Colorbox modal)

您可能希望第一个颜色框实例加载iframe 。 在此iframe中,您可以加载另一个颜色框。 What I wound up doing was making the calling colorbox larger and then having the 'child' colorbox launch inside the parent colorbox; hiding the parents "Close" buttons. Then when the 'child' box is closed ...

使用jQuery打开新页面的模式对话框(Modal dialog box which opens new page using jQuery)

当然; 实际上有很多 。 例如: jqModal 。 有关如何将单独页面加载到<iframe>的演示,请查看Alexandre Plennevaux的网站 。 Sure; there are actually many of them. For example: jqModal. For a demonstration of how to load a separate page into an <iframe>, check out Alexandre Plennevaux's site.

Internet Explorer 7 8:jQuery UI效果只能工作一次(Internet Explorer 7 8 : jQuery UI effects work only once)

滑块的内联样式(第二次显示)在IE8中是以下样式(来自IE9的兼容模式): zoom: 1; filter: alpha(opacity=0); display: block; 这意味着它是将不透明度设置为0的过滤器,这是罪魁祸首。 The inline style of the slider (on the second time it shows) is the following in IE8 (compatible mode from IE9): zoom: 1; filter: a ...

模态关闭,按钮单击时具有过渡效果(Modal close with transition effects on button click)

既然你正在使用JQuery,你不能运行淡入淡出动画然后关闭窗口吗? 像这样的东西: $( "#clickme" ).click(function() { $( "#book" ).fadeTo( "slow" , 0, function() { // Animation complete now close overlay }); }); 我用我的例子制作了一个JS.Fiddle,但我没有花时间将它应用于叠加层。 Since you are using JQuery couldn ...

即使模态框关闭,视频也会继续播放(Video keeps on playing even when modal box is closed)

试试这个(更新): https://jsfiddle.net/tonnjngm/ var modal = document.getElementsByClassName("modal")[0]; modal.onclick = function() { modal.style.display = "none"; var src = modal.querySelector('iframe').getAttribute('src'); modal.querySelector( ...

jQuery效果:当模态框打开和关闭时(jQuery effects: when modal box opens and when it closes)

您正在研究的是使用SimpleModal中内置的选项来实现您的需求。 这部分代码: success: function() { $("#message-sent").fadeIn().modal({ closeClass: 'close-btn' }); } 应该修改为使用SimpleModal提供的内置结构来启动模式框。 dialog.overlay.fadeIn()是你正在寻找使背景淡入淡出的东西: success: function() { $(" ...

模态关闭jQuery后,如何使警报消息消失?(How to make alert messages disappear after modal closes jQuery?)

您可以使用模型关闭事件: $('#locationModal').on('hidden.bs.modal', function () { //Code here }); You can use the model-close event: $('#locationModal').on('hidden.bs.modal', function () { //Code here });

相关文章

更多

最新问答

更多
  • 一个Web角色上的两个Web应用程序 - 配置问题(Two web applications on one Web Role - config issue)
  • Chrome扩展程序:在后台页面中存储变量是否安全?(Chrome extension : storing variables in background page is secure?)
  • C ++ 11中的atomics是否阻止编译器重新读取共享变量?(Do atomics in C++11 prevent compiler to re-read from shared variables?)
  • Java代码重组(Java code restructuring)
  • 从video.js获取currentTime(Get currentTime from video.js)
  • 3列 - 带溢流元件的中心柱流体(3 columns - center column fluid with an overflow element)
  • JSX节点中的TypeScript类型参数(TypeScript type arguments in JSX nodes)
  • .NET自定义事件组织帮助(.NET custom event organization assistance)
  • 如何将内存地址(如0xc20803a000)转换为字符串?(How to convert memory address (like 0xc20803a000) to string? Golang)
  • 从python中的列表创建新列表的最佳方法(Best way to create a new list from a list in python)
  • 为什么RabbitMQ会从破坏的持久性日志文件中脱颖而出?(Why does RabbitMQ keep breaking from a corrupt persister log file?)
  • 将对象添加到模型中,不更新dom(Adding object to model, doesn't update dom)
  • 将array.count转换为String(Convert array.count to String)
  • Chrome中的HTML (HTML in Chrome)
  • Sklearn:分类Imputer?(Sklearn: Categorical Imputer?)
  • 为什么iOS 9方法仍适用于iOS 8.4?(Why Do iOS 9 Methods Still Work on iOS 8.4?)
  • 输入类型文件无法获取angularjs中文件类型的文件名(input type file is unable to get the file name with file type in angularjs)
  • 为什么SplFixedArray的json_encode转储对象而不是数组?(Why does json_encode of a SplFixedArray dump an object instead of an array?)
  • ORA-01858:找到一个非数字字符,其中xp.executenonquery()上的数字是预期的(ORA-01858: a non-numeric character was found where a numeric was expected on xp.executenonquery())
  • 通过使用sscanf提取数据在BST插入函数中传递参数(Passing arguments in a BST insert function by extracting data using sscanf)
  • 混合c和c ++的问题(problem mixing c and c++)
  • 检查几个选项的文本(Checking text against several options)
  • 在Flex中创建Captch组件(Create Captch Component in Flex)
  • 查询非常复杂,不确定是否可能。(Very complicated query, not sure if it possible. Involves not adding to a running sum)
  • AOSP - networkAttributes中CSV的含义(AOSP - Meaning of CSV in networkAttributes)
  • 将不同表中的数据拖入单个视图中(Pulling data from different tables into a single view)
  • 从Enum Java调用随机值(更新)(Calling Random Value from an Enum Java)
  • jwplayer与vimeo插件(jwplayer with vimeo plugin)
  • CSS依赖于ActiveX?(CSS dependent on ActiveX?)
  • TPL Dataflow没有完成多个目标(TPL Dataflow not completing with multiple targets)