Question

所以我有一个住在这里的页面： http://testing.bistromd.com/new-media

如果您向下滚动屏幕到杂志部分，您将看到一个名为“国家烹饪评论”。单击封面图像，模态将以所有正确的时间和过渡触发。当您单击叠加层上模式外的任何位置时，它也会正确关闭过渡和时序。

当你点击模态框右上角的“X”按钮时，什么不起作用。那么模态就会在没有过渡的情况下立即消失。以下是相关代码：

<script>
  $(document).ready(function() {

    $('#cr > a').click(function() {
      $("#crModal").modal({onOpen: function (dialog) {
        dialog.overlay.fadeIn(300, function () {
          dialog.container.fadeIn(10, function () {
            dialog.data.fadeIn(200);
          });
        });
        dialog.overlay.one('click', function () {
          dialog.data.fadeOut(200, function () {
            dialog.container.slideUp(10, function () {
              dialog.overlay.fadeOut(300, function () {
                $.modal.close();
              });
            });
          });
        });
      }});
    });
</script>

提前非常感谢！

Answer 1

在SimpleModal's project page上，Eric给出了一个使用onClose事件来做动画的例子，类似于你现在如何使用onOpen事件。以下是他提供的例子：

$("#element-id").modal({onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.slideUp('slow', function () {
            dialog.overlay.fadeOut('slow', function () {
                $.modal.close(); // must call this!
            });
        });
    });
}});

SimpleModal在叠加时关闭但不在X上单击

1 个答案: