CODEWITHSUNDEEP
javascriptjquerycssmodal-dialogmaterialize
Giordano
Giordano

Reputation: 5570

Close materialize modal from center to bottom

I'm working on an application with Materialize. I'm trying to open and close a modal with a "linear transition".
I mean, I would like open it from top to center and, close it from center to bottom.

At the moment i succeed in the first case (open it from top to center) but i didn't find a way to close it as I want.

I tried to reach my goal through css, so I used this class:

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

I have searched a lot, but I didn't find a way for a custom close of modal.
Here, you can find a fiddle in order to check a simple example

Edit
I'm using materialize 0.97.7

Upvotes: 0

Views: 686

Answers (3)

Gondaliya Darshan
Gondaliya Darshan

Reputation: 41

You can check this 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.

      }
    }
  );

Upvotes: 0

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4381

If you could edit the plugin file just find this code and change the endingTop to 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%'
      };

This should apply the change throughout the website and all the modals should close to bottom and open from top and no worries about the method by which it is closed.

Upvotes: 1

nashcheez
nashcheez

Reputation: 5183

You have to add a class .bye which moves the position of your modal to top: 100% so that the modal vanishes from the center to the bottom.

The setTimeout is to remove the same class from your modal once the modal is gone so that when you click it the next time it appears from top to center.

Try this:

$(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;
}

Check updated fiddle:

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

Upvotes: 0

Related Questions