Как добавить эффект перехода при открытии моего модального окна?

Question

Я пытаюсь добавить переход, когда появляется модальное окно, но я действительно не знаю, как это сделать с моим собственным кодом. Я не хочу использовать пользовательский плагин. Эффект, который я хочу, находится на этой странице: http://tympanus.net/Development/ModalWindowEffects/ Это «Слайд (внизу)».

Это мой HTML-код:

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

Мой 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; 
} 

и мой код JavaScript:

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

Результат: http://prntscr.com/7g8eeb

Я ищу для soluti на долгое время, но я не могу ...

Answer 1

Идея состоит в том, чтобы использовать css-переходы, я создал скрипку с вашим кодом, немного изменил и добавил переходы, которые приведены в примере при условии использования, вы должны постоянно настраивать его, пока не подумаете, что вам это действительно нравится. То, что я собираюсь предоставить, является грубым примером, но переходы работают так, как вы хотите.

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/