Created
May 8, 2017 03:02
-
-
Save CodeMyUI/152a5fcf83b1e6b229608e89c3ac5a22 to your computer and use it in GitHub Desktop.
random stuff
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
by oduska | |
https://jsfiddle.net/oduska/gto21pt6/ |
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
https://code.jquery.com/jquery-2.2.4.min.js |
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
<div class="preview"> | |
<img src="http://i.imgur.com/BmGCbTd.jpg"> | |
<button class="close"> | |
X | |
</button> | |
</div> | |
<p> | |
<a href="#" class="preview-link">CLICK ME</a> | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut tellus commodo, ullamcorper lectus eu, posuere metus. Nulla finibus, nulla sed scelerisque rhoncus, orci tortor cursus lectus, quis pharetra diam ex id risus. Mauris venenatis sed metus ut tempus. Nulla lacinia iaculis ante sed egestas. Nam vitae venenatis est. Donec vitae posuere eros. Fusce vitae ultricies sem. | |
</p> |
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
$('.preview-link').click(function(){ | |
$('.preview').fadeIn(); | |
}); | |
$('.preview').click(function(){ | |
$(this).fadeOut(); | |
}).children('img').click(function(e) { | |
return false; | |
}); |
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
* { box-sizing: border-box; } | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
.preview { | |
display: none; | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
right: 0; | |
background-color: rgba(0, 0, 0, 0.8); | |
img { | |
width: calc(100% - 8em); | |
height: auto; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.close { | |
font-weight: bold; | |
border: 0; | |
text-align: center; | |
border-radius: 50%; | |
height: 3em; | |
width: 3em; | |
cursor: pointer; | |
position: absolute; | |
top: 1em; | |
right: 1em; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment