Pop up banner( youtube link promotion) using HTML,CSS and JavaScript(jQuery).

Hello readers we are back with another interesting article.This is based on the topic jQuery. HOpe alll are doing well and safe. Explore all the contents in our blog and support us.

In this article we are gonna code a pop up banner or a box. This pop up boxes are mainly used as a means of link promotion in the blog. Here I have concentrated on the Youtube link promotion, The main intention is using HTML to create a pop up banner.

In this article I have mentioned in detail the steps of creating pop up banner..

What are the Contents included in the pop up banner?

In the Header your blog name.
Include the icon in which platform you need to promote the article. Youtube in this case.
Link which you have to promote.
A visit button, In the case of Youtube I have included the "play now" button.
The next thing is the "cancel" or the "close" button.

You might like these:
How to add any programming Language's code snippets(code block) into a blog with different styles?
Shopping card using HTML,CSS and Javascript.
https://riseprogramming.blogspot.com/2020/09/shopping-card-using-htmlcss-and.html.

Video for clear understanding:

Here I have explained in detail about the code, For better understanding the video is provided.

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="popup.js"></script>
  <link rel="stylesheet" href="popup.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <button type="button" name="button" id='click'>click</button>

    <div class="banner">
      <p><b>Created by RiseProgramming</b></p>
      <i class="fa fa-youtube-play" style="font-size:80px;"></i>

       <div class="linking">
         <a href="#"><h4 style="font-size:30px">How to add POp up panner using HTML and CSS</h4></a>



      </div>
      <button type="button" name="button" id="play">Play video</button>
      <button  id="cancel" name="button">cancel</button>





    </div>

  </body>
</html>

The HTML code for this is quite simple. First a button is created on clicking it teh pop up banner will appear. In the next part a "banner" class is created in which the contents are present which would appear in the banner. At the top name of the blog is created using <p> tag and made bold. Next the youtube icon is created using the "i class='fa fa-youtube-play'".

Within the "banner" class a "linking" class is created which contains the link you are willing to promote. And at the end two buttons namely "play now" and "cancel" are created.

CSS:

html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items:center;
  background: -webkit-linear-gradient(left,blue,lightblue);

}
p{
  text-align: center;
  font-size: 40px;

}
.fa{
  color: red;
  position: relative;
  padding: 10px;
  text-align: center;
  left:45%;



}
.banner{
position: absolute;;
bottom: 0;
background-color: lightblue;
width:600px;
box-shadow: 2px 2px 20px green;
height:0;



}

a{
  text-decoration: none;
  color: black;

}
.linking{
  border: 1px solid blue;
  display: inline-block;
  text-align: center;
  width: 400px;
  text-align: center;
  margin-left: 100px;


}
button{
  font-size: 20px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  margin: 20px;

}
button:hover{
  text-decoration: underline;

}
#play{
  background: orange;
  color: blue;


}
#cancel{
  background-color: black;
  color: white;
  float: right;

}

The body and html area is customized by setting setting height and width to 100% and placing the items in center and the background color is made mixing 2 colors using "-webkit-linear-gradient".

For the "fa" class in which the youtube icon comes the color is set to red, and padding to 10px and the

"left" attribute is adjusted according to requirement.

For the "banner" class "position" is set to "absolute" and the bottom attribute is set to 0 as the banner pops up from below. Background color and box shadow are specified according to requirement. The height is set to '0' because the Banner will not be visible at the beginning it will only appear only when the button is pressed.

For The "linking" class a border of 1px is given and other attributes according to the requirements.

For the "play now" button orange color is given and for the "cancel" black color is given. The cancel button is made to float left.

jQuery:

$('document').ready(function(){
  $('.banner').hide();
  $('#click').click(function(){
    $('.banner').show();
    $('.banner').animate({bottom:'20%',
  height:'480px'});

      });
  $('#cancel').click(function(){
    $('.banner').animate({bottom:'0%',
  height:'0px'});
  $('.banner').hide(200);


});
});

jQuery is like the main thing for function of the pop up operation. At first the banner is hidden bu using "hide()" function.First on clicking the "click" button the following the banner is made visible by "show()" function and in the animate function the height is made to change to "480px" and the "bottom" attribute is set to "20%" so it can be shown in the middle and slides(pops up) above.

On clicking the play button the link for the video will be appeared.

On clicking the "cancel" button exactly the reverse of "click" button will occur. The height is made to change to '0' and bottom to 0% and the banner is hidden using "hide()" function. It will appear as if the banner is popping down.

It's Done..

RiseProgramming

Video for clear understanding:

HTML:

CSS:

jQuery:

Thanks for reading.

Post a Comment

Post a Comment

About Us

Contact Form