1

Within my web application, I was thinking of creating a pop-up screen of a page for a user to do some processing in.

I basically want this page to be like a drill-down window of displaying detailed reords based on a button you press from a top-level summary record.

Instead of a pop-up, I was thinking of a jQuery lightbox feature / modal window.

I'm open for suggestions and good easy examples of lightboxes for displaying web screen and not a photo, pretty much a pop-up window, but with a jQuery look and feel, i.e something that zooms in to the user and then zooms back out to the summary record.

0

2 Answers 2

3

Try this example,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(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 heigth 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').hide();
        $('.window').hide();
    });             

});

</script>
<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

</style>
</head>
<body>
<h2>Simple jQuery Modal Window</h2>
<ul>
<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
</ul>

<div id="boxes">
<div id="dialog" class="window">
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>
<p>Anything can go Here</p>
</div>
<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>

</body>
</html>
3
  • Thanks Tony. Based on your example, is it possible to use this as an iframe modal window by passing a url as the source? Also, can the 'Esc' key be used to also close the modal window?
    – tonyf
    Jul 1, 2009 at 13:23
  • Never tried it with an Iframe, but I don't see why it shouldnt work.
    – Tony Borf
    Jul 8, 2009 at 16:05
  • or you can use Jquery to inject the code from another file into the modal's div tags
    – Tony Borf
    Jul 8, 2009 at 16:07
-1

Are you sure you that that screen needs to be modal? Is what they are doing in that screen essential for them to do before they can use the rest of the app?

If not you risk harming usability by introducing modal windows inappropiately. Try just expanding the area rather than using lightbox techniques.

Not the answer you're looking for? Browse other questions tagged or ask your own question.