8
Я создаю сайт с Bootstrap. Я наткнулся на этот превосходный модальный эффект, который я хочу интегрировать на своем веб-сайте. Однако я не нашел никакой информации о том, как это сделать.Bootstrap Custom Modal Effect
См: http://tympanus.net/Development/ModalWindowEffects/
В частности, эффект 18: 'Дорогу' CSS-код для эффекта:
/* Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
height: 100%;
overflow: hidden;
}
.md-show.md-effect-18 ~ .md-overlay {
background: rgba(143,27,15,0.8);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
transform-style: preserve-3d;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-o-animation: rotateRightSideFirst 0.5s forwards ease-in;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@-webkit-keyframes rotateRightSideFirst {
50% {
-webkit-transform: translateZ(-50px) rotateY(5deg);
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@-moz-keyframes rotateRightSideFirst {
50% {
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
-webkit-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -ms-transform: translateZ(-50px) rotateY(5deg); -o-transform: translateZ(-50px) rotateY(5deg); -webkit-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); -ms-transform: translateZ(-200px); -o-transform: translateZ(-200px); -webkit-transform: translateZ(-200px); transform: translateZ(-200px); }
}
.md-effect-18 .md-content {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
opacity: 0;
}
.md-show.md-effect-18 .md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}
HTML Page
<div class="modal fade" id="AddGameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">Woowie! Not so fast</h2>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<h4>Remember!</h4>
<p>You have to have the physical game in order to complete a share, no digital copies allowed.</p>
</div>
<h2>Please confirm you have entered the right game:</h2>
<div id="ConfirmDetails">
<h3>Title of the game</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet luctus sapien, ut lacinia felis. Sed adipiscing vitae orci at porttitor. Integer ullamcorper et risus vel interdum. Nulla rutrum, lectus quis vestibulum mollis, lectus nisi dapibus mi, at dapibus leo augue non dolor. Sed nec felis porttitor, bibendum augue sit amet, euismod tellus. Vivamus suscipit, purus id luctus dapibus, dui mauris ultricies orci, quis lacinia neque elit nec nisl. Pellentesque suscipit urna in nibh venenatis, a aliquet arcu mattis. Integer ultricies ipsum justo, eget interdum arcu auctor id. Donec ultricies sem quam, sed egestas turpis adipiscing quis. Maecenas sit amet faucibus nisl, nec tempus nulla. Maecenas porta lectus mi, non commodo odio suscipit et. Etiam ultrices neque et adipiscing tristique.</p>
<p>Platform of the game</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Oh damn wrong one!</button>
<button type="button" class="btn btn-success">Yes that's the one mate </button>
</div>
</div>
</div>
</div>
Блестящий ответ. Помог мне много. Мне понравился другой эффект, поэтому просто поменялся ваши CSS для стилей md-effect-13, работает как шарм. Благодарю. –