Thursday, July 19, 2012

PopUp In Java Script and CSS

Steps :-

If you want to create popup on the click of a link then you need to follow the following steps.

1. Create link in you HTML file.
    <div id="link">
        <a href="javascript:openPopUp('http://makecodeeasy.blogspot.in/')">Click Here For open popUp</a>
    </div>

2. Create a popUp by HTML and CSS.
    <div id="popup" class="popUpDisplay">
   <div class="popUpTitle">
    <span onClick="closePopUp()"><img alt="Close Popup" src="close.png"/></span>
   </div>
   <div class="data">
<h3>Welcome to Make Code Easy </h3>
<br>
For getting more knowledge click on Continue
<ul class="buttons">
<li><span class="button" onclick="window.open(link), closePopUp()">Continue</span></li>
<li><span class="button" id="Cancel" onClick="closePopUp()">Cancel</span></li>
</ul>
   </div>
</div>

3. Create CSS for divs
 

.popUpTitle {
    background-color: #000000;
    height: 40px;
    width: 100%;
}


.popUpTitle img {
    float: right;
    margin-right: 2px;
    margin-top: 5px;
}


.data {
    background-color: #FFFFFF;
    height: auto;
    overflow: hidden;
font-size: 14px;
    padding: 25px 25px 50px;
    width: auto;
}


.buttons li {
    cursor: pointer;
    float: left;
    height: 29px;
    margin-right: 15px;
    width: 134px;
}


span.button {
    background-color: #000000;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    padding: 8px 25px;
    text-align: center;
}


.popUpDisplay {
    display: none;
    position: absolute;
    width: 440px;
height: 300px;
    width: 440px;
    left: 250px;
    z-index: 1001;
}


.dimLayer {
    display: none;
    outline: 0px none;
    height: 100%;
    width: 100%;
    background: #A9A9A9;
    top: 0px;
    left: 0px;
    z-index: 900;
    position: absolute;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
}

4. Create Java Script methods
    <script type="text/javascript">
var link;
var element;
function openPopUp(url)
{
link = url;
element = document.getElementById("background");
element.style.display = "block";
element = document.getElementById("popup");
element.style.display = "block";

}


function closePopUp()
{
element = document.getElementById("popup");
element.style.display = "none";
element = document.getElementById("background");
element.style.display = "none";
}


</script>

5. When you click on link then popup opens.
6. Download the full example for checking the output.
 

Download Full Example
    

16 comments:

  1. This is really simple - even for a script noob as me - and thus simply great!

    Unfortunately, when using it for youtube videos, I have an issue. When closing the popup containing the video, the audio from the video is still being played back in the background. I found several options to stop the video (youtube API etc.), however, I wasn't able to combine them with your elegant popup solution.

    It would be great if you would have a hint in the right direction.

    Either way, many thanks for the instructions!

    Georg

    ReplyDelete
  2. great tip! could you please share the code for auto popup on page load? Thanks

    ReplyDelete
  3. write this code in script tag.
    window.onload = openPopUp('http://makecodeeasy.blogspot.ins');

    ReplyDelete
  4. Is Javascript has be written in separate file? IF so, it has to saved under what name? Sorry for the dumb question, new to this.

    ReplyDelete
  5. where is #popUp - ID values at CSS?

    ReplyDelete
  6. You can write javascript in any file with any name but need to save the extension as ".js" for that file.
    After that add file in html head or body section.
    http://www.w3schools.com/tags/att_script_src.asp

    ReplyDelete
  7. where is #popUp - ID values at CSS?

    Here we are using class values (".popUpDisplay") in css file instead of ID values.
    In starting display value of .popUpDisplay is none so popup div is invisible. But after clicking on the link we changed display block to popup div. so now popup div is visible.

    We can change this code .popUpDisplay { } of css by #popup{ } this code.
    or you can get div by class name instead of id value.
    document.getElementsByClassName("popUpDisplay")

    Thanks

    ReplyDelete
  8. This is what I am trying to create: A popup on page load, when customer signups up in the popup page, two things need to happen - 1. customer information need to be sent to database, 2. he need to be redirected to thank you page(url). You mentioned for "on page load" action, i need to insert this on body tag - openPopUp('http://makecodeeasy.blogspot.ins') - what is this URL with .ins? what do I need to replace here? the Thank you page URL with .ins extension at end? I am sorry, I am confused, can you please explain? Thanks

    ReplyDelete
  9. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    best rpa training in bangalore
    rpa training in bangalore | rpa course in bangalore
    RPA training in bangalore
    rpa training in chennai
    rpa online training

    ReplyDelete
  10. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    best rpa training in bangalore
    rpa training in bangalore | rpa course in bangalore
    RPA training in bangalore
    rpa training in chennai
    rpa online training

    ReplyDelete
  11. I simply wanted to write down a quick word to say thanks to you for those wonderful tips and hints you are showing on this site.
    python Course in Pune
    python Course institute in Chennai
    python Training institute in Bangalore

    ReplyDelete
  12. Really very nice blog information for this one and more technical skills are improve,i like that kind of post.
    AWS Training in Bangalore

    AWS Training in pune

    ReplyDelete
  13. Attend The Python Training in Bangalore From ExcelR. Practical Python Training in Bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Python Training in Bangalore.

    ReplyDelete

ShareThis