Javascript and Jquery PopUp window

Question

hy all, I have tried several tutorials to create a javascript or Jquery smooth PopUp window but nothing worked.. I need it to run considering that i am using HTML5. i need a code that is certain to work. Any ideas? I need a smooth popup window and i don't know how to do it anyone help? My HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>  
    <link rel="stylesheet" href="general.css" type="text/css" media="screen" />  
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>  
    <script src="Popup.js" type="text/javascript"></script>  

</head>  
<body>  
    <center>  
        <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>  
        <div id="button"><input type="submit" value="Press me please!" /></div>  
    </center>  
    <div id="popupContact">  
        <a id="popupContactClose">x</a>  
        <h1>Title of our cool popup, yay!</h1>  
        <p id="contactArea">  
            Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...  
            <br/><br/>  
            We can use it for popup-forms and more... just experiment!  
            <br/><br/>  
            Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!  
            <br/><br/>  
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>  
        </p>  
    </div>  
    <div id="backgroundPopup"></div>  
</body>  
</html>

My Javascript file :

<script type="text/javascript">
    //SETTING UP OUR POPUP  
//0 means disabled; 1 means enabled;  
var popupStatus = 0;
    //loading popup with jQuery magic!  
        alert(popupStatus);
    function loadPopup(){  
    //loads popup only if it is disabled  

    if(popupStatus==0){
        alert(popupStatus);
    $("#backgroundPopup").css({  
    "opacity": "0.7"  
    });  
    $("#backgroundPopup").fadeIn("slow");  
    $("#popupContact").fadeIn("slow");  
    popupStatus = 1;  
    }  
    } 
    //disabling popup with jQuery magic!  
    function disablePopup(){  
    //disables popup only if it is enabled  
    if(popupStatus==1){  
    $("#backgroundPopup").fadeOut("slow");  
    $("#popupContact").fadeOut("slow");  
    popupStatus = 0;  
    }  
    }  
        //centering popup  
    function centerPopup(){  
    //request data for centering  
    var windowWidth = document.documentElement.clientWidth;  
    var windowHeight = document.documentElement.clientHeight;  
    var popupHeight = $("#popupContact").height();  
    var popupWidth = $("#popupContact").width();  
    //centering  
    $("#popupContact").css({  
    "position": "absolute",  
    "top": windowHeight/2-popupHeight/2,  
    "left": windowWidth/2-popupWidth/2  
    });  
    //only need force for IE6  

    $("#backgroundPopup").css({  
    "height": windowHeight  
    });  

    }  
        $(document).ready(function(){  
    //following code will be here  
    //LOADING POPUP  
    //Click the button event!  
    $("#button").click(function(){  
    //centering with css  
    centerPopup();  
    //load popup  
    loadPopup();  
    });  

        //CLOSING POPUP  
    //Click the x event!  
    $("#popupContactClose").click(function(){  
    disablePopup();  
    });  
    //Click out event!  
    $("#backgroundPopup").click(function(){  
    disablePopup();  
    });  
    //Press Escape event!  
    $(document).keypress(function(e){  
    if(e.keyCode==27 &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; popupStatus==1){  
    disablePopup();  
    }  
    });  

    });  


</script>

My CSS file :

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,  
tfoot, thead, tr, th, td {  
border:0pt none;  
font-family:inherit;  
font-size:100%;  
font-style:inherit;  
font-weight:inherit;  
margin:0pt;  
padding:0pt;  
vertical-align:baseline;  
}  
body{  
background:#fff none repeat scroll 0%;  
line-height:1;  
font-size: 12px;  
font-family:arial,sans-serif;  
margin:0pt;  
height:100%;  
}  
table {  
border-collapse:separate;  
border-spacing:0pt;  
}  
caption, th, td {  
font-weight:normal;  
text-align:left;  
}  
blockquote:before, blockquote:after, q:before, q:after {  
content:"";  
}  
blockquote, q {  
quotes:"" "";  
}  
a{  
cursor: pointer;  
text-decoration:none;  
}  
br.both{  
clear:both;  
}  
#backgroundPopup{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:100%;  
width:100%;  
top:0;  
left:0;  
background:#000000;  
border:1px solid #cecece;  
z-index:1;  
}  
#popupContact{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:384px;  
width:408px;  
background:#FFFFFF;  
border:2px solid #cecece;  
z-index:2;  
padding:12px;  
font-size:13px;  
}  
#popupContact h1{  
text-align:left;  
color:#6FA5FD;  
font-size:22px;  
font-weight:700;  
border-bottom:1px dotted #D3D3D3;  
padding-bottom:2px;  
margin-bottom:20px;  
}  
#popupContactClose{  
font-size:14px;  
line-height:14px;  
right:6px;  
top:4px;  
position:absolute;  
color:#6fa5fd;  
font-weight:700;  
display:block;  
}  
#button{  
text-align:center;  
margin:100px;  
}

what do you mean by smooth popup window? is it "window.open" or the "lightbox"'es not working? — Taha Paksu
– Taha Paksu, Commented Mar 17, 2012 at 7:55
I need something like Facebook when u pop up a pic, till now i deleted everything because i was fed up with it. I need a certain working code then i will try to include it to my desire — ELias Rahme
– ELias Rahme, Commented Mar 17, 2012 at 8:00
I need something like that : yensdesign.com/2008/09/… , but i dunno why it didn't work with me :S i guess i'm a newbie and don't know how to put it together..please help — ELias Rahme
– ELias Rahme, Commented Mar 17, 2012 at 8:02

user2722002 · Accepted Answer · 2013-09-04 13:44:28Z

Let's keep it simple, yeah?

http://jsfiddle.net/TwLMD/1/

Your HTML is simple. Two divs, one for your popup, and the other to cover the screen. Two buttons are added to give us something to click:

<div class="cover"></div>
<div class="popup">
    <button class="close">close</button>
</div>
<button class="open">click me</button>

The CSS adds some basic styling, but puts them on screen in the right place:

.popup 
{
    position:fixed;
    border:solid 1px black;
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    margin:-100px 0 0 -100px;
    display:none;
    background-color:white;
}
.cover 
{
    background-color:black;
    width:100%;
    height:100%;
    display:none;
    position:fixed;
}

Now wire it up:

$(".open").click(function () {
    $(".popup").fadeIn(500);
    $(".cover").fadeTo(500, 0.5);
});

$(".close").click(function () {
    $(".popup").fadeOut(500);
    $(".cover").fadeOut(500);
});

Kamyar Nazeri · Accepted Answer · 2012-03-17 07:56:51Z

2

Have you seen JQueryUI Dialog?

answered Mar 17, 2012 at 7:56

Kamyar Nazeri

26.7k15 gold badges55 silver badges88 bronze badges

2 Comments

ELias Rahme Over a year ago

I need something like Facebook when u pop up a pic

ELias Rahme Over a year ago

I need something like that : yensdesign.com/2008/09/… , but i dunno why it didn't work with me :S i guess i'm a newbie and don't know how to put it together..please help

Collectives™ on Stack Overflow

Javascript and Jquery PopUp window

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related