jquery工具叠加，如何在切换叠加时保持遮罩

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

正如您所看到的，还有第二个叠加层的确认版本，但它与错误1相同。

Answer 1

我希望你不介意，但我创建了自己的简化例子。 希望你能够适应你的情况。

对话框之间有一点点闪烁（由于动画效果）但是掩模保持不变。 我想你可以通过调整动画效果设置来消除闪烁 – 我怀疑你可以在叠加的onBeforeLoad方法中做一些事情，但我不确定是什么。

         
 Stage 1 
 
 
Stage 1 dialogue
 
 You can only interact with elements that are inside this dialog. To close it click a button or use the ESC key. 
 Stage 2 
 
 
Stage 2 dialogue
 
 You can only interact with elements that are inside this dialog. To close it click a button or use the ESC key. 
 Stage 3 
 
 
Stage 3 dialogue
 
 You can only interact with elements that are inside this dialog. To close it click a button or use the ESC key. 
 End 
    

我希望这有帮助。

Answer 2

我认为更简单的方法是

 .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'); } } }); 

Answer 3

您可以将“closeSpeed：0”添加到第一个叠加层的遮罩配置中，它将起作用。 例如：

  $('#login_overlay').overlay({ top:'center', mask: { color: '#666', closeSpeed: 0, opacity: 0.5 } }); 

Answer 4

另一种方法是单独处理遮罩：在没有遮罩的情况下创建叠加层，并单独激活遮罩。

您的第一个叠加层需要设置，例如：

 $(selector).overlay({ ..., onBeforeLoad: function(){ $(document).mask('#222'); closeMask=true; }, onClose: function(){ if (closeMask) $.mask.close(); } ); 

然后，为了显示第二个叠加层，将closeMask变量设置为false。 显然，第二个叠加必须隐藏掩码。