Uneori, s-ar putea să avem nevoie ca, la apăsarea unui link/buton, să se deschidă o fereastră pop-up. De exemplu, la un post de radio, aceasta ar fi o soluţie rezonabilă pentru ca, cel care ascultă postul să nu piardă contactul cu emisiunea respectivă, la închiderea browserului sau a tab-ului unde este deschis site-ul, cu player-ul implicit, ori la comutarea la alte pagini. Nefiind ceva foarte greu, pentru a nu utiliza prea multe cuvinte, redau mai jos codul CSS şi cel HTML.
Acesta ar fi codul CSS pentru personalizarea lui.
.container {
position: relative;
width: 100%;
}
.fotog {
display: block;
width: 100%;
height: auto;
margin:0!important;
padding:0!important;
}
.rulare {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #b7b7b9;
}
.container:hover .rulare {
color:white!important;
opacity: 1;
}
.buton {
background-color: #f16421;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px!important;
margin: 10px 0px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
width:90%;
transition-duration: 0.4s;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Undeva, într-un widget tip HTML sau TEXT se poate introduce codul HTML:
<div class="container">
<a href="#" onclick="window.open('https://live.gofm.ro:2000/AudioPlayer/impactFMradio?','popup','width=400,height=250'); return false;"><img class="aligncenter fotog" src="https://impactfm.ro/wp-content/uploads/2020/02/player-300x145.png" alt="" width="300" height="145" />
<div class="rulare">
<div class="buton"> Ascultă LIVE</div></a>
</div>
</div>
O mică problemă ar fi că scriptul JavaScript s-ar putea să fie, deseori, „eliminat” de platforma WordPress.
