CODEWITHSUNDEEP
javascriptjquerycssmaterialize
mcmwhfy
mcmwhfy

Reputation: 1686

materialize modal open 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?

Upvotes: 1

Views: 5815

Answers (4)

shubh jaiswal
shubh jaiswal

Reputation: 438

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);
}

Upvotes: 0

Evgeny Sorokin
Evgeny Sorokin

Reputation: 730

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.net/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

Upvotes: 5

kevin b.
kevin b.

Reputation: 1534

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.net/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);
  },
  complete: function() { alert('Closed'); } // Callback for Modal close
    }
  );
});

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

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
    });
});

Upvotes: 1

Related Questions