Last active
September 29, 2019 10:32
-
-
Save YakovSPb/3affbb714b84f265004789efa6edaf18 to your computer and use it in GitHub Desktop.
magnific-popup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. В папке проекта в комстроке пишем bower i magnific-popup | |
@import "../libs/magnific-popup/dist/magnific-popup.css" // Теперь необходимо казывать расширение .css | |
'app/libs/magnific-popup/dist/agnific-popup.min.js', | |
2. Подключаем | |
3. <div class="hidden"> | |
<form class="popup-form callback zoom-anim-dialog" id="callback"> | |
<!-- Hidden Required Fields --> | |
<input type="hidden" name="project_name" value="Юрдис"> | |
<input type="hidden" name="admin_email" value="yakov_dux@bk.ru"> | |
<input type="hidden" name="form_subject" value="Новая заявка с сайта Юрдис"> | |
<!-- END Hidden Required Fields --> | |
<h3>Заказать звонок</h3> | |
<label> | |
<span>Ваше имя:</span> | |
<input type="text" name="Имя" placeholder="Введите ваше имя.."> | |
</label> | |
<label> | |
<span>Ваше телефон:</span> | |
<input type="text" name="Телефон" placeholder="Введите ваш телефон..." required> | |
</label> | |
<div class="text-center"> | |
<button class="button">Оправить</button> | |
</div> | |
<input class="formname" type="hidden" name="Форма"> | |
</form> | |
</div> | |
4. В coomon.js пишем где //E-mail Ajax Send подключаем стиль $(".callback") | |
5. в сыллки кнопки пишем #callback <a href="#callback" class="button button-small popup-with-move-anim" data-form="Вверхняя форма">Заказать звонок</a> | |
6. На сайте http://dimsemenov.com/plugins/magnific-popup/ | |
Берем вариант | |
$('a[href=#callback]').magnificPopup({ | |
type: 'inline', | |
fixedContentPos: false, | |
fixedBgPos: true, | |
overflowY: 'auto', | |
closeBtnInside: true, | |
preloader: false, | |
midClick: true, | |
removalDelay: 300, | |
mainClass: 'my-mfp-slide-bottom' | |
}); | |
7. В папке css создаем файл _magnific-custom.css и переносим туда | |
и в main.sass подключем @import "../app/css/magnific-custom" | |
/* Styles for dialog window */ | |
.popup-form { | |
background: white; | |
padding: 20px 30px; | |
text-align: left; | |
max-width: 400px; | |
margin: 40px auto; | |
position: relative; | |
} | |
/** | |
* Fade-zoom animation for first dialog | |
*/ | |
/* start state */ | |
.my-mfp-zoom-in .zoom-anim-dialog { | |
opacity: 0; | |
-webkit-transition: all 0.2s ease-in-out; | |
-moz-transition: all 0.2s ease-in-out; | |
-o-transition: all 0.2s ease-in-out; | |
transition: all 0.2s ease-in-out; | |
-webkit-transform: scale(0.8); | |
-moz-transform: scale(0.8); | |
-ms-transform: scale(0.8); | |
-o-transform: scale(0.8); | |
transform: scale(0.8); | |
} | |
/* animate in */ | |
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { | |
opacity: 1; | |
-webkit-transform: scale(1); | |
-moz-transform: scale(1); | |
-ms-transform: scale(1); | |
-o-transform: scale(1); | |
transform: scale(1); | |
} | |
/* animate out */ | |
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { | |
-webkit-transform: scale(0.8); | |
-moz-transform: scale(0.8); | |
-ms-transform: scale(0.8); | |
-o-transform: scale(0.8); | |
transform: scale(0.8); | |
opacity: 0; | |
} | |
/* Dark overlay, start state */ | |
.my-mfp-zoom-in.mfp-bg { | |
opacity: 0; | |
-webkit-transition: opacity 0.3s ease-out; | |
-moz-transition: opacity 0.3s ease-out; | |
-o-transition: opacity 0.3s ease-out; | |
transition: opacity 0.3s ease-out; | |
} | |
/* animate in */ | |
.my-mfp-zoom-in.mfp-ready.mfp-bg { | |
opacity: 0.8; | |
} | |
/* animate out */ | |
.my-mfp-zoom-in.mfp-removing.mfp-bg { | |
opacity: 0; | |
} | |
/** | |
* Fade-move animation for second dialog | |
*/ | |
/* at start */ | |
.my-mfp-slide-bottom .zoom-anim-dialog { | |
opacity: 0; | |
-webkit-transition: all 0.2s ease-out; | |
-moz-transition: all 0.2s ease-out; | |
-o-transition: all 0.2s ease-out; | |
transition: all 0.2s ease-out; | |
-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); | |
-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); | |
-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); | |
-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); | |
transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); | |
} | |
/* animate in */ | |
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { | |
opacity: 1; | |
-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); | |
-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); | |
-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); | |
-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); | |
transform: translateY(0) perspective( 600px ) rotateX( 0 ); | |
} | |
/* animate out */ | |
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog { | |
opacity: 0; | |
-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); | |
-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); | |
-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); | |
-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); | |
transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); | |
} | |
/* Dark overlay, start state */ | |
.my-mfp-slide-bottom.mfp-bg { | |
opacity: 0; | |
-webkit-transition: opacity 0.3s ease-out; | |
-moz-transition: opacity 0.3s ease-out; | |
-o-transition: opacity 0.3s ease-out; | |
transition: opacity 0.3s ease-out; | |
} | |
/* animate in */ | |
.my-mfp-slide-bottom.mfp-ready.mfp-bg { | |
opacity: 0.8; | |
} | |
/* animate out */ | |
.my-mfp-slide-bottom.mfp-removing.mfp-bg { | |
opacity: 0; | |
} | |
8. Вставить в common.js | |
$("a[href=#callback]").click(function(){ | |
$("#callback .formname").val($(this).data("form")); | |
}); | |
//E-mail Ajax Send | |
//Documentation & Example: https://github.com/agragregra/uniMail | |
$(".callback").submit(function() { //Change | |
var th = $(this); | |
$.ajax({ | |
type: "POST", | |
url: "mail.php", //Change | |
data: th.serialize() | |
}).done(function() { | |
$(".success").addClass("visible"); | |
setTimeout(function() { | |
// Done Functions | |
th.trigger("reset"); | |
$(".success").removeClass("visible"); | |
$.magnificPopup.close(); | |
}, 3000); | |
}); | |
return false; | |
}); | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment