我有2个叠加的简单问题。一个叠加层由另一个叠加层触发(和)。由于在任何时候只有一个叠加可以处于活动状态,因此,触发2的叠加编号1将关闭。然而,它需要掩码,因此叠加2没有掩码。如何在没有遮罩消失的情况下在2个叠加层之间切换?
代码,叠加1
$("button[rel*=busy]").overlay({
api: true ,
mask: {
maskId: 'defaultMask' ,
color: null
},
effect: 'apple',
onLoad: function() {
$.post( 'ajax_file_here.php' ,
{ var: something } ,
function( data ){
if( data.status == 'confirm' ) {
confirmOverlay();
} else {
errorOverlay();
}
} ,
'json' );
} ,
closeOnClick: false ,
closeOnEsc: false ,
close: '.noClose'
});
叠加2
var errOverlayObject = $('#error_overlay').overlay({
api: true,
mask: {
maskId: 'defaultMask' ,
color: null
},
effect: "apple"
});
function errorOverlay() {
errOverlayObject.load();
}
正如您所看到的,还有第二个叠加层的确认版本,但其效果与错误一致。
答案 0 :(得分:6)
我认为更简单的方法是
.overlay({
mask: { color: '#000', opacity: '.60' },
onLoad: function(){
var t = $.mask;
if(!t.isLoaded()){
t.load();
var ov = this.getOverlay();
ov.css('z-index', '9999');
}
}
});
答案 1 :(得分:4)
我希望你不介意,但我创建了自己的简化示例。希望你能够适应你的情况。
对话框之间有一点点闪烁(由于动画效果)但是掩模保持不变。我想你可以通过调整动画效果设置来消除闪烁 - 我怀疑你可以在叠加层的 onBeforeLoad 方法中做些什么,但我不确定是什么。
<!DOCTYPE html>
<html>
<head>
<title>Chained Modals</title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<style>
.modal {
background-color:#fff;
display:none;
width:350px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
</style>
</head>
<body>
<p>
<button class="modalInput" rel="#box1">Stage 1</button>
</p>
<div class="modal" id="box1">
<h2>Stage 1 dialogue</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<button class="modalInput" rel="#box2">Stage 2</button>
</div>
<div class="modal" id="box2">
<h2>Stage 2 dialogue</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<button class="modalInput" rel="#box3">Stage 3</button>
</div>
<div class="modal" id="box3">
<h2>Stage 3 dialogue</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<button class="close">End</button>
</div>
<script>
$(window).load(function() {
var msk;
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9,
onClose: function() {
var id = this.getExposed().attr('id');
if(id == 'box1'|| id == 'box2'){
var nextId;
if(id == 'box1'){
nextId = '#box2';
}
if(id == 'box2'){
nextId = '#box3';
}
msk = this.getMask();
msk.css('display','block');
$(nextId).css('z-index', '9999');
}
}
},
closeOnClick: false,
onBeforeLoad: function(){
var id = this.getOverlay().attr('id');
if(id == 'box2'|| id == 'box3'){
// need to put something here to avoid flicker
//
// this.getConf().mask.startOpacity = 0.8;
}
}
});
});
</script>
</body>
</html>
我希望这会有所帮助。
答案 2 :(得分:2)
您可以添加&#34; closeSpeed:0&#34;进入第一个叠加层的掩码配置,它将起作用。 例如:
$('#login_overlay').overlay({
top:'center',
mask: {
color: '#666',
closeSpeed: 0,
opacity: 0.5
}
});
答案 3 :(得分:1)
另一种方法是单独处理遮罩:在没有遮罩的情况下创建叠加层,并且单独激活遮罩。
您的第一个叠加层需要进行以下设置:
$(selector).overlay({
...,
onBeforeLoad: function(){
$(document).mask('#222');
closeMask=true;
},
onClose: function(){
if (closeMask) $.mask.close();
}
);
然后,为了显示第二个叠加层,将closeMask变量设置为false。显然,第二个叠加层必须隐藏遮罩。