Sometimes we may need to open a pop-up window when we press a link / button. For example, on a radio station, this could be a reasonable solution so that the person listening to the station doesn’t lose contact with the respective show, when he closes the browser or the tab where the site is open, with the player by default, or when it switches to other pages. Since it’s not very difficult, so as not to use too many words, I list the CSS and HTML code below.
This is the CSS code for customizing it.
.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%);
}
Somewhere, in an HTML or TEXT widget you can enter the HTML code:
<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>
A small problem would be that the JavaScript script may often be “removed” from the WordPress platform.
