Create Overlay (on click dont work)
This commit is contained in:
parent
837a9c734e
commit
f5ccb0403e
@ -1,5 +1,43 @@
|
||||
<template>
|
||||
<div class="Medialist">
|
||||
|
||||
<!-- Overlay -->
|
||||
<div id="overlay">
|
||||
<div class="overlay_inner">
|
||||
<div class="overlay_container">
|
||||
<div class="overlay_top">
|
||||
<ul>
|
||||
<li>< <i class="ion-chevron-left"></i></li>
|
||||
<li> > <i class="ion-chevron-right"></i></li>
|
||||
<li class="close"><i class="ion-android-close"></i>x</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="overlay_content">
|
||||
<div class="overlay_left">
|
||||
<div class="overlay_img"><img src="assets/images/placeholder_image.jpg" alt=""></div>
|
||||
</div>
|
||||
<div class="overlay_right">
|
||||
Dateiname: 210_21.jpg<br>
|
||||
Dateityp: image/jpeg<br>
|
||||
Hochgeladen am: 14. September 2017<br>
|
||||
Dateigröße: 64 KB<br>
|
||||
Abmessungen: 600 × 600
|
||||
<section class="overlay_form">
|
||||
<form action="">
|
||||
<input type="text" placeholder="URL">
|
||||
<input type="text" placeholder="Titel">
|
||||
<input type="text" placeholder="Beschriftung">
|
||||
<input type="text" placeholder="Alternativtext">
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Medien</h1>
|
||||
<div class="medialist_container">
|
||||
<!-- Media-File -->
|
||||
@ -7,7 +45,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +54,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -25,7 +63,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Das-Dokument.pdf</div>
|
||||
<i class="icon icon-document-text"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,7 +72,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Das-Dokument.pdf</div>
|
||||
<i class="icon icon-document-text"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -43,7 +81,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Das-Dokument.pdf</div>
|
||||
<i class="icon icon-document-text"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,7 +90,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -61,7 +99,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -70,7 +108,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Das-Dokument.pdf</div>
|
||||
<i class="icon icon-document-text"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -79,7 +117,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Audiofile.mp3</div>
|
||||
<i class="icon icon-stats-bars"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -88,7 +126,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Videofile.avi</div>
|
||||
<i class="icon icon-videocamera"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -97,7 +135,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -106,7 +144,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Videofile.avi</div>
|
||||
<i class="icon icon-videocamera"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,7 +153,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -124,7 +162,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Audiofile.mp3</div>
|
||||
<i class="icon icon-stats-bars"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -133,7 +171,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -142,7 +180,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -151,7 +189,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -160,7 +198,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -169,7 +207,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Dokument.pdf</div>
|
||||
<i class="icon icon-videocamera"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -178,7 +216,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Dokument.pdf</div>
|
||||
<i class="icon icon-document-text"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -187,7 +225,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -196,7 +234,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -205,7 +243,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -214,7 +252,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -223,7 +261,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -232,7 +270,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -241,7 +279,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -250,7 +288,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -259,7 +297,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -268,7 +306,7 @@
|
||||
<div class="media_inner">
|
||||
<img src="assets/images/placeholder_image.jpg" alt="">
|
||||
<i class="icon icon-images"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -277,7 +315,7 @@
|
||||
<div class="media_inner">
|
||||
<div class="text">Videofile.avi</div>
|
||||
<i class="icon icon-videocamera"></i>
|
||||
<a href="#overlay"></a>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -290,6 +328,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.media a').on('click', function(e) {
|
||||
$('#overlay').show();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "~mixins";
|
||||
.medialist_container {margin:-6px;}
|
||||
@ -364,6 +410,92 @@
|
||||
@media(max-width:600px) {
|
||||
.media {width:50%;}
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
#overlay {
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
left:0;
|
||||
z-index:2000;
|
||||
background:rgba(0,0,0,0.8);
|
||||
/*display:none;*/
|
||||
}
|
||||
.overlay_inner {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
bottom:0px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align:center;
|
||||
line-height:1.2;
|
||||
}
|
||||
.overlay_container {
|
||||
background: #FFF;
|
||||
height: auto;
|
||||
width: 50%;
|
||||
margin-top: -50px;
|
||||
/*border: solid 5px #CCC;*/
|
||||
/*align-items: center;
|
||||
justify-content: center;
|
||||
text-align:center;*/
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.overlay_top {
|
||||
height:40px;
|
||||
width:100%;
|
||||
background:#FFF;
|
||||
border-bottom:solid 1px #CCC;
|
||||
}
|
||||
.overlay_top ul {list-style-type: none; float:right;}
|
||||
.overlay_top ul li {float:left; height:40px; line-height:40px; width:40px; text-align:center; color:#666; border-left:solid 1px #CCC;}
|
||||
.overlay_top ul li i:before {margin:0px;}
|
||||
|
||||
.overlay_content {
|
||||
text-align: center;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.overlay_left {
|
||||
float:left;
|
||||
width:60%;
|
||||
padding: 25px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align:center;
|
||||
flex: 1;
|
||||
}
|
||||
.overlay_right {
|
||||
float:left;
|
||||
width:40%;
|
||||
padding: 25px;
|
||||
border-left:solid 1px #CCC;
|
||||
background:#eeeeee;
|
||||
/*display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;*/
|
||||
text-align:left;
|
||||
flex: 1;
|
||||
font-weight:400;
|
||||
}
|
||||
.overlay_img {
|
||||
width:80%;
|
||||
}
|
||||
.overlay_img img {width:100%;}
|
||||
.overlay_form {
|
||||
border-top:solid 1px #CCC;
|
||||
padding-top:30px;
|
||||
margin-top:30px;
|
||||
}
|
||||
.overlay_form input {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user