以灰色父窗口時子窗口達

Question

我正在尋找一種方式來做到這一點：

打開，顯示我的員工列表視圖中的彈出窗口
1. JavaScript函數
2. 當彈出窗口打開灰顯父母/開門人窗口
3. 當彈出窗口關閉時，父窗口「面紗」被刪除。

感謝您的任何代碼或想法。

Answer 1

繼承人解決方案，我已經建立了這一點，通過訪問或open()close()

你能堅持內#container

• http://jsfiddle.net/mikeymagic/eT2Lz/17/

的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>​ 

的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 } 

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() }) 

}); 

Answer 2

只需使用window.open再加入一些條件，你需要爲灰色時的父窗口

Answer 3

我的理解是這樣的......

你試圖使用一種叫「疊加」（放孩子時灰色背景，而父母是開放的）。這就是所謂的模態彈出窗口，在這裏我給你的插件的鏈接使用它們使用jQuery：

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

Answer 4

有關於如何做到這一點的任何數量的變化。面對同樣的需求，我終於決定使用jQuery.impromptu。一旦窗口的內容定義，我流行起來，而變灰父與單一stagement：

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

你可以看到它發生在http://terryliittschwager.com/WB/JWB.php。

即興可在http://trentrichardson.com/Impromptu/。