I'm trying to open the materialize modal drooping from top to bottom, exactly like in this fiddle but reverse from top to bottom. Unfortunately is pretty hard to modify something on materialize modal because some of the css properties have been added from materialize js. The special effect from bottom to top is added by "bottom-sheet" class but a "top-sheet" class is not exist.

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

So how can I modify the open effect to be reversed and the modal to be eopened from top to bottom?

I'm trying to open the materialize modal drooping from top to bottom, exactly like in this fiddle but reverse from top to bottom. Unfortunately is pretty hard to modify something on materialize modal because some of the css properties have been added from materialize js. The special effect from bottom to top is added by "bottom-sheet" class but a "top-sheet" class is not exist.

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

So how can I modify the open effect to be reversed and the modal to be eopened from top to bottom?

• javascript
• jquery
• css
• materialize

Share Improve this question Follow asked Mar 21, 2017 at 12:50 mcmwhfymcmwhfy 1,68666 gold badges3636 silver badges6060 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I know this solution is soooooo hacky, but at least it works.

.modal.top-sheet {
  top: 0% !important;
  bottom: auto !important;
  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .2s;
  will-change: transform;
  transform: translate(0, -100%) scale(1) !important;
  width: 100%;
  opacity: 1 !important;
}

.modal.top-sheet.open {
   transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .35s .25s;
}

.modal.top-sheet.open:not([style*="display: none"]):not([style*="opacity: 0;"]) {
  transform: translate(0, 0%) !important;
}

https://jsfiddle/xmz0afhf/1/

The principle:

1. Setting "bottom" property to "auto !important"
2. Overwriting transition property to include "top"
3. Applying css rule that is applied when display prop is not "none" and "opacity" prop is not "0"

Edit: updated so you can use bottom-sheet and top-sheet separately

Materialize Modal give top to bottom effect by default with scaling modal dialog. If you want top to bottom sliding functionality then you can use simple $.slideToggle(). But if you want to modify Materialize JS then you can try Fiddle with the below code,

$(document).ready(function() {
    $('#modal1').modal({
      startingTop: '0', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
    });
});

Just like @Rohan Kumar said, materialize does give you the possibility to somehow modify the behaviour of the modal. You can check it here: materialize modal options

this is what I got on Fiddler: https://jsfiddle/7f6hmgcf/25/

$(document).ready(function() {
$('.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: '-10%', // Starting top style attribute
  endingTop: '10px', // <-- HEIGHT OF THE BUTTON
  ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
    console.log(modal, trigger);
  },
  plete: function() { alert('Closed'); } // Callback for Modal close
    }
  );
});

if you want to add top-sheet modal by using native way then edit you materialize files as following:

materialize.css: add this style to you css file

 .modal.top-sheet {
      top: -100%;
      bottom: auto;
      margin: 0;
      width: 100%;
      max-height: 45%;
      border-radius: 0;
      will-change: top, opacity;
    }

materialize.js: find and edit "Bottom sheet animation" as following

Edit in animateIn() function

// Bottom sheet animation
if (this.$el[0].classList.contains('bottom-sheet')) {
   Vel(this.$el[0], { bottom: '-100%', opacity: 0 }, exitVelocityOptions);
}else if (this.$el[0].classList.contains('top-sheet')) {
   Vel(this.$el[0], { top: '-100%', opacity: 0 }, exitVelocityOptions);
}

Edit in animateOut() function

// Bottom sheet animation
if (this.$el[0].classList.contains('bottom-sheet')) {
   Vel(this.$el[0], { bottom: 0, opacity: 1 }, enterVelocityOptions);
}else if (this.$el[0].classList.contains('top-sheet')) {
    Vel(this.$el[0], { top: 0, opacity: 1 }, enterVelocityOptions);
}