Last active
December 8, 2016 22:16
-
-
Save alexermakov/7358dd18bfe69d4a75a0 to your computer and use it in GitHub Desktop.
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
<!-- start style --> | |
<style type="text/css"> | |
.alModal { | |
width: 90%; | |
max-width: 280px; | |
height:auto; | |
display: none; | |
position: fixed; | |
z-index: 100; | |
font-family: sans-serif; | |
background: rgb(255, 255, 255); | |
border: 1px solid #fff; | |
border-radius: 3px; | |
opacity: 0; | |
top: 100%; | |
left: 50%; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.alModalContent { | |
padding: 15px 22px; | |
} | |
.alModalClose { | |
cursor: pointer; | |
width: 26px; | |
display: block; | |
text-align: center; | |
float: right; | |
position: absolute; | |
top: 3px; | |
right: 3px; | |
z-index: 101; | |
color: #808080; | |
font-size: 16px; | |
height: 26px; | |
line-height: 26px; | |
font-family: sans-serif; | |
} | |
.alModalClose:hover {color:#ccc;} | |
.alModal p { | |
position: relative; | |
display: block; | |
text-align: center; | |
color: #444; | |
margin: 0px; | |
font-size: 16px; | |
line-height: 1.3; | |
padding: 0px 10px; | |
} | |
#overlay { | |
z-index: 29; | |
position: fixed; | |
background-color: #000; | |
opacity: 0.8; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
cursor: pointer; | |
display: none; | |
} | |
</style> | |
<!-- end style --> | |
<!-- start html block --> | |
<!-- | |
навешиваем событие спомощью класса js_alModal | |
в data-modalуказываем нашу модалку | |
--> | |
<div class="js_alModal" data-modal='js_modal-2'>открыть text</div> | |
<!-- | |
не забываем overlay | |
--> | |
<div id="overlay"></div> | |
<div class="alModal js_modal-2"> | |
<span class="alModalClose js_alModalClose">✖</span> | |
<div class="alModalContent"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident cupiditate asperiores, dignissimos cum. Debitis laborum incidunt non repudiandae optio, vero odit quasi. Necessitatibus, perspiciatis tempora incidunt sint accusantium eveniet ullam.</p> | |
</div> | |
</div> | |
<!-- end html block --> | |
<!-- start script block --> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($) { | |
function showModal(modalName){ | |
$('#overlay').fadeIn(500, | |
function() { | |
var ModalLeft = ($(window).width() - $(modalName).outerWidth()) / 2; | |
var ModalTop = (window.innerHeight - $(modalName).outerHeight()) / 2; | |
setTimeout(function() { | |
$(modalName) | |
.css('display', 'block') | |
.animate({ | |
opacity: 1, | |
left: ModalLeft + 'px', | |
top: ModalTop + 'px' | |
}, 300); | |
}, 50) | |
}); | |
} | |
$('.js_alModal').click(function(event) { | |
event.preventDefault(); | |
var modalClass='.'+$(this).attr('data-modal'); | |
showModal(modalClass); | |
}) | |
$('.js_alModalClose, #overlay').click(function() { | |
$('.alModal').animate({opacity: 0}, 200, | |
function() { | |
$(this).css({ | |
'display': 'none', | |
'top': '100%', | |
'left': '50%' | |
}); | |
$('#overlay').fadeOut(400); | |
} | |
); | |
}); | |
}); | |
</script> | |
<!-- end script block --> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment