Popup all'interno del sito fatto con wordpress

[jokerinos]

Buonasera , avrei una curiosità da sottoporvi , vorrei creare un popup ma non il solito popup con il classico codice javascript che apre la finestrella al di fuori del sito , a me servirebbe leggere qualche guida che parli come creare un popup che si apra all'interno del sito e che mi riproduca un video preso da youtube , oppure che lo faccia vedere tramite il codice embed
E' possibile secondo voi ?



Grazie e cordiali saluti

[Web Designer]

Certo che si può, ecco il codice:

Codice PHP:

<style type="text/css">
<!--  #fadeinbox{ position:absolute; width: 210px; left: 0; top: -400px; border: 2px solid black; background-color: #ffffff; padding: 4px; z-index: 100; visibility:hidden; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } //-->
</style>
<script type="text/javascript"> <!--
//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.
var displaymode="oncepersession"
//var displaymode="always"
var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
var autohidebox=["no", 30] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=1 //fade in duration for IE, in seconds
var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
////////No need to edit beyond here///////////
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
function displayfadeinbox(){
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters){
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity){
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else{
objref.style.MozOpacity=1
controlledhidebox()
}
}
else
controlledhidebox()
}
function mozfadefx(){
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else{
clearInterval(mozfadevar)
controlledhidebox()
}
}
function staticfadebox(){
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}
function hidefadebox(){
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}
function controlledhidebox(){
if (autohidebox[0]=="yes"){
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}
function initfunction(){
setTimeout("displayfadeinbox()", 100)
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}
//--> </script>
<div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=blue,direction=200) ; -moz-opacity:0">
<br /><br />
<center>INSERISCI QUI IL CODICE EMBED DI YOUTUBE</center>
<br /><br />
<div align="right">
<a href="#" onClick="hidefadebox();return false" class="gensmall"> [Chiudi]</a></div>
</div> 


[jokerinos]

Grazie ma mi potresti consigliare anche qualche sito o qualche blog dove trovo guide e tutorial se ne conosci ?

Grazie mille
Ps questo codice lo devo applicare alla index del template giusto ?

Cordiali saluti

[Web Designer]

Ciao, in rete ce ne sono una marea di tutorial, quindi per questo "attingi" al buon Google.
Inserisci il popup nella index ricordandoti di inserire l'embed di youtube dove ti ho indicato.

[jokerinos]

Ciao grazie per lo script davvero bello l'ho modificato un po' e viene un bel risultato soltanto con internet explorer mi da qualche problema in quanto
ho inserito nel foglio di stile : background-image:url(wp-content/themes/channel/images/VIDEOBACK.jpg);

che mi inserisce uno sfondo sotto il video pero' scompare il tasto chiudi mentre in google chrome tutto questo non succede come si spiega sto fatto.

Grazie
Ps ma in un sito fatto in wordpress il codice mi conviene inserirlo nel file index.php o nel file header.php

Cordiali saluti

[Web Designer]

Purtroppo con i "browser" bisogna perderci un po' più di tempo modificando in maniera ottimale lo script. Per il resto aggiungi lo script in questione in cima all'header di WP e se hai problemi inseriscilo alla fine.

[jokerinos]

Ciao grazie sono riuscito al sistemare il tutto davvero un bell'effetto , grazie pero' mi puoi consigliare qualche sito dove ci sono tutti questi codici con esempi che io possa studiare in quanto vorrei provare a fare un sito tutto in jquery tipo la finestra che si apre a tutto schermo e che dentro escono le animazioni ?

Puoi consigliarmi qualche blog ben fatto in quanto io non ne sono riuscito a trovare.
Grazie