Question

我正在使用Materialize处理应用程序。我正试图打开和关闭一个带有“线性过渡”的模态。
我的意思是，我想从顶部到中心打开它，从中心到底部关闭它。

目前我在第一种情况下成功（从顶部到中心打开），但我找不到按照我的意愿关闭它的方法。

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

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

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

修改
我正在使用物化0.97.7

Answer 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%'
      };

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

Answer 2

你必须添加一个类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; }是模式消失后从模态中删除相同的类，以便下次从顶部到中心显示时单击它。

试试这个：

{{1}}

检查更新的小提琴：

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

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

      }
    }
  );

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

3 个答案: