Floating banner that can be closed

For some time I was looking for some option through which I could show on my website an ad or floating banner that could be minimized or closed (I had already found an option in which the ad floated, inserted in a div, but could not be What made me mess when the page was shown in resolutions lower than 1280 px), and I found absolutely nothing.


Banner flotante que se puede cerrar

However, these days and without looking too much, I found an option that has come to me like a glove, that I’ve fallen for pearls and through which I have managed to solve my problem and show some other advertising on my website.

It is a code in javascript that can be inserted both on site that work only in html, or that handle PHP. That is, it works for practically every type of website. The code to achieve it is the following:

<div id=’window-floating’>
<a class=’close’ href=’javascript:void(0);’ onclick=’document.getElementById(&apos;window-floating&apos;).className = &apos;oculto&apos;’>x</a>
<div id=’container’>
<div class=’content’>

Here goes the message

</div>
</div>
</div>

<style>
#window-floating {
width: 360px; /*Width of the window*/
height: 90px; /*Window height*/
background: #ceffad; /* Background color */
position: fixed;
top: 200px;
left: 50%;
margin-left: -180px;
border: 1px solid #adffad; /* Edge of the window */
box-shadow: 0 5px 25px rgba(0,0,0,.1); /* Shadow */
z-index:999;
}
#window-floating #container {
padding: 25px 10px 10px 10px;
}
#window-floating .close {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#window-floating .close:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#window-floating #container .content {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4; /* Messege background */
border: 1px solid #9eff9e; /* Edge of the messege */
font-size: 20px; /* Messege text size */
color: #555; /* Messege text color */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.hidden {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>

The interesting thing about all this is that not only you can insert advertising, images, etc., but also serves to put a Facebook button, to put social networks, to use a centered window loading a page, or to move it aside, so that the banner is floating in certain resolutions, without affecting the content (which is going to be very positive for what we need, since it will be shown fixed on the PC screen all the time), etc. .

The modifiable values ​​have been indicated in the code itself, such as the width of the window or the position of the floating window using coordinates.

We invite you to write in the comments box, if this valuable information has been useful. Has it been easy for you? What problems did you have when applying it? Also, if you have doubts about it, do not hesitate to express your concerns and in the shortest time we will try to answer it. If you know other techniques or methods, it would be great to share them with us.

Floating banner that can be closed
Source: Technology  
June 18, 2019


Next Random post