Example of using a pop-up window

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.

Fig. 1 Button before pressing


.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%);
}

Fig. 2 Button when pressed

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>

Fig. 3 Fereastra pop-up

A small problem would be that the JavaScript script may often be “removed” from the WordPress platform.

Author: Ovidiu.S

I am quite passionate about this professional area as if I know something - no matter how little - I want to share it with others.

Leave a Reply