1

I'm looking for a way to do this:

  1. Javascript function that opens a pop-up window that displays a list view of my employees
  2. When pop-up window opens grey-out parent/opener window
  3. When pop-up window is closed, parent window "veil" is removed.

Thanks for any code or ideas.

Larry K
  • 47,808
  • 15
  • 87
  • 140
Mechetta
  • 31
  • 1
  • 3

4 Answers4

1

What I understood is this...

Your are trying to use something called "overlay" (put gray background in child while parent is open). This is called modal popups, here I give you a link with plugins for using them with jQuery:

http://www.designlabelblog.com/2009/03/20-ways-to-create-javascript-modal.html

Oscar Jara
  • 14,129
  • 10
  • 62
  • 94
1

Heres a solution i've built for this, accessible via open() or close()

you can stick all your content inside of #container

the html:

<span id="empli">Employees</span>

<div id="block"></div>
<div id="container">
    <h3>Employees</h3>
    <ul>
        <li>James</li>
        <li>Jemima</li>
        <li>lenny</li>
        etc..
    </ul>
    <span id="closebtn">Close</span>
</div>​

the css:

* { font-family: Trebuchet MS; }
#container {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
#container iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
#block {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#closebtn { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#closebtn:hover {  cursor: pointer; background: #E5E5E5 }

#empli { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#empli:hover {  cursor: pointer; background: #E5E5E5 }

​the jquery:

function open() {
    $('#block').fadeIn();
    $('#container').fadeIn();   
}

function close() {  
    $('#block').fadeOut();
    $('#container').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#container').width()-20,height:    $('#container').height()-90})

     $('#closebtn').click( function() { close() })
     $('#empli').click( function() { open() })

});

​

Michael Zaporozhets
  • 23,588
  • 3
  • 30
  • 47
0

Just use window.open then add some condition you'll need to grey-out the parent window

Emil
  • 7,220
  • 17
  • 76
  • 135
Christopher Pelayo
  • 792
  • 11
  • 30
0

There are any number of variations on how to do this. Faced with the same need, I finally settled on using jQuery.impromptu. Once the contents of the window are defined, I pop it up while greying out the parent with a single stagement:

    $.prompt(sFirstText,{overlayspeed:'fast',prefix:'wideJqi',top:80});

You can see it happen at http://terryliittschwager.com/WB/JWB.php.

Impromptu is available at http://trentrichardson.com/Impromptu/.

Terry
  • 1,437
  • 2
  • 12
  • 26