GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

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

POPUP WINDOW
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.jpgwidth="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.jpgwidth="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.jpgwidth="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://lh3.googleusercontent.com/--ng4i8Hqny8/VUynmr6BGsI/AAAAAAAARK8/G4DlXBBLHo8G6sqsQJsK3xBrhHJYXSG5ACCo/s480-Ic42/KERKYRA-21.jpg"/>
<iframe width="480" height="300" src="https://www.youtube.com/embed/9DHBkkJ-_hY" frameborder="0" allowfullscreen></iframe></div></div></div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".