从中心到底部关闭物化模态答案

【问题标题】：Close materialize modal from center to bottom从中心到底部关闭物化模态
【发布时间】：2017-03-28 13:12:01
【问题描述】：

我正在使用 Materialise 开发一个应用程序。我正在尝试使用“线性过渡”打开和关闭模式。
我的意思是，我想从上到中打开它，然后从中到下关闭它。

目前我在第一种情况下成功（从上到中心打开它），但我没有找到我想要的关闭它的方法。

我试图通过 css 达到我的目标，所以我使用了这个类：

.modal-slide-show {
    transform: none !important;
}

我已经搜索了很多，但我没有找到自定义关闭模态的方法。
Here，你可以找一个fiddle来检查一个简单的例子

编辑
我正在使用物化 0.97.7

【问题讨论】：

编辑物化插件脚本文件有问题吗？
@DanPhilip，最好不要修改它，但也感谢这个解决方案。提前致谢

标签： javascript jquery css modal-dialog materialize

【解决方案1】：

如果您可以编辑插件文件，只需找到此代码并将endingTop 更改为 14%。

var methods = {
    init : function(options) {
      var defaults = {
        opacity: 0.5,
        inDuration: 350,
        outDuration: 250,
        ready: undefined,
        complete: undefined,
        dismissible: true,
        startingTop: '4%',
        endingTop: '14%'
      };

这应该在整个网站上应用更改，并且所有模式都应该从底部关闭并从顶部打开，并且不用担心关闭的方法。

【讨论】：

首先感谢您的回答。我在materialize.js 中没有找到这段代码。我正在使用 0.97.7 版本。可以用吗？
我从您在小提琴中提到的外部资源中获取了代码。它应该在那里。

【解决方案2】：

您必须添加一个类.bye，它将模态的位置移动到top: 100%，以便模态从中心到底部消失。

setTimeout 是在模态消失后从模态中删除相同的类，以便下次单击它时它会从上到中显示。

试试这个：

$(document).ready(function() {
  $('#modal1').modal();
  $(".modal-close").click(function() {
    $(".modal").addClass("bye");
    setTimeout(function() {
      $(".modal").removeClass("bye");
    }, 700);
  });
});

.bye {
  top: 100% !important;
}

.modal-slide-show {
  transform: none !important;
  transition: all .5s !important;
}

检查更新的小提琴：

https://jsfiddle.net/nashcheez/nb5sv2x5/3/

【讨论】：

【解决方案3】：

你可以查看这个JSFiddle link:

 $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '70%', // Starting top style attribute
      endingTop: '60%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.

      }
    }
  );

【讨论】：