Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //html
- <a href="#" class="call_back">Call me</a>
- <div id="callback" class="item_popup mfp-hide">
- <p class="name_item_popup">name popup</p>
- </div>
- //js
- $('body').on('click', 'a.call_back', function () {
- $.magnificPopup.open({
- items: {
- src: '#callback',
- type: 'inline',
- removalDelay: 300,
- preloader: false
- },
- mainClass: 'mfp-fade'
- });
- return false;
- });
- //fade effect sass
- .mfp-fade
- &.mfp-bg
- opacity: 0
- transition: all 0.15s ease-out
- &.mfp-ready
- opacity: 0.8
- &.mfp-removing
- opacity: 0
- &.mfp-wrap
- .mfp-content
- opacity: 0
- transition: all 0.15s ease-out
- &.mfp-ready .mfp-content
- opacity: 1
- &.mfp-removing .mfp-content
- opacity: 0
- //item sass
- .item_popup
- max-width: 500px
- background: #fff
- box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.4)
- padding: 40px 30px 40px
- margin: 0 auto
- position: relative
Add Comment
Please, Sign In to add comment