当子窗口打开时，父窗口显示为灰色

Gray out parent window when child window is up

本文关键字：窗口 显示 灰色      更新时间：2023-09-26

我正在寻找一种方法来做到这一点：

  1. 打开弹出窗口的 Javascript 函数，该窗口显示我的员工的列表视图
  2. 当弹出窗口打开灰色父/打开器窗口时
  3. 当弹出窗口关闭时，父窗口"面纱"将被移除。

感谢您的任何代码或想法。

这是我为此构建的解决方案，可通过open()或close()访问

您可以将所有内容粘贴在#container

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

该网页： 

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

​

我的理解是这个...

您正在尝试使用称为"覆盖"的东西(在父项打开时将灰色背景放在子项中(。这称为模态弹出窗口，在这里我为您提供一个带有插件的链接，用于将它们与 jQuery 一起使用：

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

关于如何做到这一点，有很多变化。面对同样的需求，我最终决定使用jQuery.impromptu。定义窗口的内容后，我会弹出它，同时使用单个阶段将父级灰显：

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

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

即兴可在 http://trentrichardson.com/Impromptu/获得。

只需使用window.open然后添加一些条件，您需要将父窗口变灰

相关文章：