How can I add a transition effect when opening my custom modal window?


Tags: javascript,jquery,html,css

Problem :

I'm trying to add a transition when my modal window appears, but I really don't know how to do with my own code. I don't want use a custom plugin. The effect that I want is on this page: http://tympanus.net/Development/ModalWindowEffects/ It's the "Slide in (bottom)".

This is my HTML code:

    <div class="overlay-box">
        <div class="overlay-box-container">
            <span class="overlay-box-closer" title="Close the overlay"></span>
            <h1 class="big-title" style="margin-bottom: 15px;">The paragraph title</h1>
            <p>This is the big paragraph</p>
        </div>
    </div>
    <div id="expose-mask"></div>

My CSS:

.overlay-box
{
    background-color: #FFFFFF;
    position: fixed;
    top: 35%;
    right: 0;
    left: 0;
    z-index: 4;
    width: 70%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 7px;
}

.overlay-box-container
{
    margin: 20px;
}

.overlay-box-container .big-title
{
    background-color: #F5F5F5;
    margin: -20px -20px 20px;
    padding: 20px;
    border-bottom: 1px solid #CCCCCC;
}

.overlay-box-closer
{
    position: absolute;
    top: -20px;
    right: -15px;
    width: 30px;
    height: 30px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 19px;
    border-radius: 50%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    border: 3px solid #FFFFFF;
    box-shadow: 1px 1px 5px #000000;
    -webkit-box-shadow: 1px 1px 5px #000000;
    -moz-box-shadow: 1px 1px 5px #000000;

}

.overlay-box-closer:hover
{
    background-color: rgba(187, 0, 0, 0.9);
}

.overlay-box-closer:before
{
    content: "\f00d";
}

#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

and my JavaScript code:

(function($)
{
    $('#expose-mask').click(function(e)
    {
        $('body').removeClass('side-block');
    })
    $('.overlay-trigger').click(function(e)
    {
        e.preventDefault();
        $('#expose-mask').css({'display': 'inherit'}).fadeIn(function()
        {
            $('.overlay-box').css({'display': 'inherit'});
        });
    });
    $('#expose-mask, .overlay-box').css({'display': 'none'});
    $('.overlay-box-closer, #expose-mask').click(function()
    {
        $('.overlay-box, #expose-mask').css({'display': 'none'});
        $('#expose-mask');
    });
})(jQuery);

Result: http://prntscr.com/7g8eeb

I'm looking for a solution for a long time, but I can't...



Solution :

The idea is to use css transitions, I've created a fiddle with your code, tweaked a little bit and added the transitions that the example you've provided uses, you should keep tweaking it until you think you really like it :) What i'm going to provide is a rough example but the transitions are working the way you want to.

HTML:

<div class="overlay-trigger">Show Modal</div>

<div class="overlay-box">
        <div class="overlay-box-container">
            <span class="overlay-box-closer" title="Close the overlay"></span>
            <h1 class="big-title" style="margin-bottom: 15px;">The paragraph title</h1>
            <p>This is the big paragraph</p>
        </div>
    </div>
    <div id="expose-mask"></div>

JS:

(function ($) {
    $('#expose-mask').click(function (e) {
        $('body').removeClass('side-block');
    });
    $('.overlay-trigger').click(function (e) {
        e.preventDefault();
        $('.overlay-box').addClass('shown');
    });
    $('#expose-mask').css({'display': 'none'});
    $('.overlay-box-closer, #expose-mask').click(function () {
        $('#expose-mask').css({'display': 'none'});
        $('.overlay-box').removeClass('shown');
    });
})(jQuery);

CSS:

.overlay-box.shown {
    visibility: visible;
}

.overlay-box
{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.overlay-box .overlay-box-container {
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  transform: translateY(20%);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
    margin: 20px;
}

.overlay-box.shown .overlay-box-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.overlay-box-container .big-title
{
    background-color: #F5F5F5;
    margin: -20px -20px 20px;
    padding: 20px;
    border-bottom: 1px solid #CCCCCC;
}

.overlay-box-closer
{
    position: absolute;
    top: -20px;
    right: -15px;
    width: 30px;
    height: 30px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 19px;
    border-radius: 50%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    border: 3px solid #FFFFFF;
    box-shadow: 1px 1px 5px #000000;
    -webkit-box-shadow: 1px 1px 5px #000000;
    -moz-box-shadow: 1px 1px 5px #000000;

}

.overlay-box-closer:hover
{
    background-color: rgba(187, 0, 0, 0.9);
}

.overlay-box-closer:before
{
    content: "\f00d";
}

#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

http://jsfiddle.net/x76usd8j/1/


    CSS Howto..

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How to add code area css style to HTML

    how can I apply a CSS stylesheet to all page views in my Firefox browser

    How to style Java FX TableView column header using CSS

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    Showing the div when display is set to none

    How can I style html/form elements using CSS?

    How can I reduce ons-list-item height?

    How do I replicate this website in terms of responsiveness using only css?

    Show and hide table column using jQuery

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How to give different color to draghandle in RangeSlider

    How can I show this 2 div side by side?

    How to make a div inside a div while keeping same image background

    how can I create overlay div to fit the rest of the screen

    How can I make a color background that expands out of the 960 grid system?

    How to changing css on bootstrap button Group

    zindex + jquery: How to make my menu appear over the jquery script?

    Fullpage.js: How to add css class “active” to slide anchor

    How to force a list to be vertical using html css

    How do I do the CSS for this?

    How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How do I vertically centre a div of variable height within a div of variable height?

    How can I vertically align the text on these CSS buttons?

    How can I get rid of the the gap below absolutely positioned content?

    How to make possible vertical scroll on popup and disable vertical scroll for page by using CSS?

    How to make image stretch to a specific paragraph?

    how to use both fixed and relative position property in same page using css?

    how to get background image present in other folder with css?