Question

当用户关闭浏览器窗口或尝试刷新时，浏览器的默认对话框后面会弹出一个模态。但是，如果我尝试将动画应用于模态，例如fadeIn或向下滑动，则仅在确认默认对话框后才会显示动画和模态。

我正在使用Bootstrap模式。这是我的代码：

HTML：

<div class="modal" id="holidays-leave-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!--content here-->
</div>

JQuery的

<script type="text/javascript">

    $(window).bind('beforeunload', function() {

      $( "#holidays-leave-modal" ).fadeIn();      

      return ("Don't leave yet!");  
}); 
</script>

以下是该页面的实例： Modal on page close

如果我将Jquery从fadeIn更改为“show”，则模式将与默认对话同时出现。所以我假设动画正在排队。但是，我已经看到这样做，模式滑入默认对话框后面的页面背景。

任何想法如何在对话框打开之前/之后播放动画？如果我不能使用Jquery为它设置动画，那么CSS3动画也可以。

Answer 1

提示框是模态的，阻止任何挂起的脚本执行。您可以使用CSS3动画/过渡，但它无法在所有浏览器上按预期工作（我正在考虑IOS上的Safari，即使我目前无法对其进行测试）。

这是一个简单的例子，在beforeunload处理程序中打开一个类来打开CSS3 fadeIn转换：

<强> CSS

#fadeLink {
    opacity: 0;
    -webkit-transition: opacity 4s linear;
    -moz-transition: opacity 4s linear;
    -o-transition: opacity 4s linear;
    transition: opacity 4s linear;
}
#fadeLink.fadein {
    opacity: 1;
}

<强> JS / jQuery的

$(window).bind('beforeunload', function() {

      $( "#fadeLink" ).addClass('fadein');      

      return ("Don't leave yet!");  
});

在页面卸载/浏览器关闭之前运行动画

1 个答案:

-jsFiddle-