POPUP WINDOWS ΜΕ ΚΕΙΜΕΝΟ, ΕΙΚΟΝΕΣ ΚΑΙ ΒΙΝΤΕΟ

POPUP WINDOWS ΜΕ ΚΕΙΜΕΝΟ, ΕΙΚΟΝΕΣ ΚΑΙ ΒΙΝΤΕΟ

Με τον παρακάτω κώδικα μπορείτε να πατάτε ένα button και να ανοίγει ένα popup window το οποίο μπορεί να περιέχει κείμενο, εικόνες και βίντεο και θα κλείνει με close X. Οι διαστάσεις των popup windows αλλάζουν εάν αλλάξετε το .popup {width:auto;height:auto; Τα πράσινα links των εικόνων και των βίντεο αλλάξτε τα με τα δικά σας links.

Τα χρώματα αλλάξουν εάν αλλάξετε τον 6ψήφιο κωδικό χρώματος που ακόλουθεί μετά το σύμβολο της δίεσης  #. Αλλάξτε και τις περιγραφές του έχω χρωματίσει με κίτρινα γράμματα.

Ο κώδικας μπαίνει στο HTML της ανάρτησης ή της σελίδας του ιστολογίου σας αλλά εννοείται ότι μπορεί να μπεί και οπουδήποτε αλλού απλά σαν gadget. Δείτε εδώ ακριβως από κάτω πως λειτουργουν τα buttons με τα popup windows.

ΑΓΙΟΦΥΛΙ ΛΕΥΚΑΔΑ

×

Η ΠΑΡΑΛΙΑ ΑΓΙΟΦΥΛΙ ΣΤΗ ΛΕΥΚΑΔΑ

ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ

×

Η ΠΑΡΑΛΙΑ ΝΑΥΑΓΙΟ ΣΤΗ ΖΑΚΥΝΘΟ

ΜΥΡΤΟΣ ΚΕΦΑΛΟΝΝΙΑ

×

Η ΠΑΡΑΛΙΑ ΜΥΡΤΟΣ ΣΤΗ ΚΕΦΑΛΟΝΝΙΑ

ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΚΕΡΚΥΡΑ

×

Η ΠΑΡΑΛΙΑ ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΣΤΗ ΚΕΡΚΥΡΑ

<style>

.button {font:13px Arial;padding:5px;border:2px solid #FBBB22;background:#173377;color:#FFF;border-radius:5px;text-decoration:none;cursor:pointer;transition:all 0.2s ease-out;}

.button:hover {background:#105105;color:#FFF;border-color:#00FF00;}

.button:active {background:#255720;color:#FFF;border-color:#00FF00;}

.overlay {position:fixed;top:31px;left:0px;background:none;transition:opacity 200ms;visibility:hidden;opacity:0; z-index:999;}

.overlay .cancel {position: absolute;width: 100%;height: 100%;cursor: default;}

.overlay:target {visibility: visible;opacity:1; z-index:999;}

.popup {width:auto;height:auto;margin:0;padding:5px;background:#115599;color:#FFF;border: 2px solid #F11111;position:relative; z-index:999;}

.popup .close {position: absolute;width:20px;height:20px;top:5px;right:5px;opacity:1;transition: all 200ms;font:bold 24px Arial;text-decoration:none;color: #FFFF00; z-index:999;}

.popup .close:hover {opacity: 1;}

.popup .content {max-height: 1200px;overflow: auto;}

</style>

<a class="button" href="#popup1">ΑΓΙΟΦΥΛΙ ΛΕΥΚΑΔΑ</a>

<div id="popup1" class="overlay">

<div class="popup">

<a class="close" href="#">&times;</a>

<div class="content">

<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΑΓΙΟΦΥΛΙ ΣΤΗ ΛΕΥΚΑΔΑ</span></p>

<img src="http://i.imgur.com/PP5nCr5l.jpg" width="480" height="300"/>

<iframe width="480" height="300" src="https://www.youtube.com/embed/gjmEIb1MQPU" frameborder="0" allowfullscreen></iframe>

</div></div></div>

<a class="button" href="#popup2">ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ</a>

<div id="popup2" class="overlay">

<div class="popup">

<a class="close" href="#">&times;</a>

<div class="content">

<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΝΑΥΑΓΙΟ ΣΤΗ ΖΑΚΥΝΘΟ</span></p>

<img src="http://i.imgur.com/fiVofHIl.jpg" width="480" height="300"/>

<iframe width="480" height="300" src="https://www.youtube.com/embed/YSuo0j2xsj8?rel=0&start=22&end=235&autoplay=0&loop=1&playlist=YSuo0j2xsj8" frameborder="0" allowfullscreen></iframe>

</div></div></div>

<a class="button" href="#popup3">ΜΥΡΤΟΣ ΚΕΦΑΛΟΝΝΙΑ</a>

<div id="popup3" class="overlay">

<div class="popup">

<a class="close" href="#">&times;</a>

<div class="content">

<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΜΥΡΤΟΣ ΣΤΗ ΚΕΦΑΛΟΝΝΙΑ</span></p>

<img src="http://i.imgur.com/qrKer61l.jpg" width="480" height="300"/>

<iframe width="480" height="300" src="https://www.youtube.com/embed/t9tS-3QZMC8?rel=0&autoplay=0&loop=1&playlist=t9tS3QZMC8" frameborder="0" allowfullscreen></iframe>

</div></div></div>

<a class="button" href="#popup4">ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΚΕΡΚΥΡΑ</a>

<div id="popup4" class="overlay">

<div class="popup">

<a class="close" href="#">&times;</a>

<div class="content">

<p><span style="background:#F11111;color:#FFF;font:14px Arial;">Η ΠΑΡΑΛΙΑ ΠΑΛΑΙΟΚΑΣΤΡΙΤΣΑ ΣΤΗ ΚΕΡΚΥΡΑ</span></p>

<img src="https://i.imgur.com/Pq9Dexa.jpg" width="480" height="300" />

<iframe width="480" height="300" src="https://www.youtube.com/embed/9DHBkkJ-_hY" frameborder="0" allowfullscreen></iframe></div></div></div>