Monday, December 26, 2011

How to create a stunning and smooth popup using jQuery?

<!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="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>
</head>
<body>
        <div id="button"><input type="submit" value="Press me please!" /></div>
        <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
   
    <a href="#" id="ch1">click</a>
    <input type="button" onclick="document.getElementById('ch1').href='cvb'">
    <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>


source : http://yensdesign.com/tutorials/popupjquery/