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
    

11 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

ShareThis