Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Hello!</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- </head>
- <script type="text/javascript">
- $(document).ready(function() {
- //select all the a tag with name equal to modal
- $('a[name=modal]').click(function(e) {
- //Cancel the link behavior
- e.preventDefault();
- //Get the A tag
- var id = $(this).attr('href');
- //Get the screen height and width
- var maskHeight = $(document).height();
- var maskWidth = $(window).width();
- //Set height and width to mask to fill up the whole screen
- $('#mask').css({'width':maskWidth,'height':maskHeight});
- //transition effect
- $('#mask').fadeIn(1000);
- $('#mask').fadeTo("slow",0.8);
- //Get the window height and width
- var winH = $(window).height();
- var winW = $(window).width();
- //Set the popup window to center
- $(id).css('top', winH/2-$(id).height()/2);
- $(id).css('left', winW/2-$(id).width()/2);
- //transition effect
- $(id).fadeIn(2000);
- });
- //if close button is clicked
- $('.window .close').click(function (e) {
- //Cancel the link behavior
- e.preventDefault();
- $('#mask, .window').hide();
- });
- //if mask is clicked
- $('#mask').click(function () {
- $(this).hide();
- $('.window').hide();
- });
- });
- </script>
- <style>
- #mask {
- position:absolute;
- z-index:8000;
- background-color:#f2f2f2;
- display:none;
- }
- #boxes .window {
- position:absolute;
- width:440px;
- height:200px;
- display:none;
- z-index:9999;
- padding:20px;
- }
- #boxes #dialog {
- width:375px;
- height:203px;
- background:#fff;
- }
- </style>
- <body>
- <!-- #dialog is the id of a DIV defined in the code below -->
- <a href="#dialog" name="modal">Click Me</a>
- <div id="boxes">
- <div id="dialog" class="window">
- <b>MODAL WINDOW</b> -><a href="#" class="close">Close it</a>
- </div>
- <div id="mask"></div>
- </div>
- <div class="text">
- <h1> Test </h1> <p>
- <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/188050_169149283138446_2377278_n.jpg" alt="alt" />
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment