Php 当子窗口打开时,父窗口变灰
我正在寻找一种方法来做到这一点:Php 当子窗口打开时,父窗口变灰,php,javascript,jquery,ajax,jquery-ui,Php,Javascript,Jquery,Ajax,Jquery Ui,我正在寻找一种方法来做到这一点: Javascript函数,打开一个弹出窗口,显示我的员工列表视图 当弹出窗口打开时,灰色的父窗口/打开窗口 当弹出窗口关闭时,父窗口“面纱”被移除 感谢您提供的任何代码或想法。只需使用窗口。打开然后添加一些条件,您将需要将父窗口灰显。我理解的是 您正在尝试使用一种称为“覆盖”的方法(在父对象打开时,在子对象中放置灰色背景)。这就是所谓的模态弹出窗口,这里我为您提供了一个与jQuery一起使用的插件链接: 关于如何做到这一点,有很多不同的方法。面对同样的需求,我最
感谢您提供的任何代码或想法。只需使用
窗口。打开
然后添加一些条件,您将需要将父窗口灰显。我理解的是
您正在尝试使用一种称为“覆盖”的方法(在父对象打开时,在子对象中放置灰色背景)。这就是所谓的模态弹出窗口,这里我为您提供了一个与jQuery一起使用的插件链接:
关于如何做到这一点,有很多不同的方法。面对同样的需求,我最终决定使用jQuery.impromptu。一旦定义了窗口的内容,我会弹出它,同时用一个阶段灰显父窗口:
$.prompt(sFirstText,{overlayspeed:'fast',prefix:'wideJqi',top:80});
你可以看到它发生在
即兴可用。这是我为此构建的解决方案,可通过
open()
或close()
您可以将所有内容粘贴到#容器中
<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>
* { 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 }
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:
<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>
* { 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 }
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() })
});