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
    

53 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. 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
  7. 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
  8. 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
  9. Easily, the article is actually the best topic on this registry related issue. I fit in with your Python classes in pune conclusions and will eagerly look forward to your next updates.

    ReplyDelete
  10. I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!
    data analytics course hyderabad

    ReplyDelete
  11. Amazing Article ! I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
    amazon web services aws training in chennai

    microsoft azure training in chennai

    workday training in chennai

    android-training-in chennai

    ios training in chennai

    ReplyDelete
  12. Vidal International's Data Science Course in Vizag offers comprehensive training in the field of data science. Learn essential skills such as data analysis, machine learning, and predictive modeling from industry experts. Gain hands-on experience through practical projects and develop the expertise to extract valuable insights from complex datasets. Join our course and embark on a rewarding journey in the world of data science.

    ReplyDelete
  13. Nice Post . Thanks for sharing
    Java Training in Solapur

    ReplyDelete
  14. FCE2D
    ----
    ----
    ----
    ----
    ----
    matadorbet
    ----
    ----
    ----

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. <a href="https://alryan-services.com.sa/%d8%b4%d8%b1%d9%83%d8%a9-%d8%b9%d8%b2%d9%84-%d8%a7%d8%b3%d8%b7%d8%ad-%d8%a8%d8%b5%

    ReplyDelete

ShareThis