Tengo un problema simple con 2 superposiciones. Una superposición se activa desde (y por) la otra superposición. Como solo una superposición puede estar activa a la vez, correctamente, la superposición número 1 que activó 2 se cierra. Sin embargo, lleva consigo la máscara y, por lo tanto, la superposición 2 aparece sin la máscara. ¿Cómo puedo cambiar entre 2 superposiciones sin que la máscara desaparezca?
El código, superposición 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'
});
Y superposición 2
var errOverlayObject = $('#error_overlay').overlay({
api: true,
mask: {
maskId: 'defaultMask' ,
color: null
},
effect: "apple"
});
function errorOverlay() {
errOverlayObject.load();
}
Como puede ver, también hay una versión de confirmación de la segunda superposición, pero funciona de manera idéntica a la del error.
4 respuestas
Espero que no te importe, pero creé mi propio ejemplo simplificado. Esperemos que pueda adaptar esto a su situación.
Hay un pequeño parpadeo entre los cuadros de diálogo (debido al efecto de animación) pero la máscara permanece en su lugar. Me imagino que podría eliminar el parpadeo ajustando la configuración del efecto de animación. Sospecho que podría hacer algo en el método onBeforeLoad de la superposición, pero no estoy exactamente seguro de qué.
<!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>
Espero que esto ayude.
Una alternativa es manejar la máscara por separado: la superposición se crea sin una máscara y la máscara se activa por separado.
Su primera superposición requeriría una configuración como:
$(selector).overlay({
...,
onBeforeLoad: function(){
$(document).mask('#222');
closeMask=true;
},
onClose: function(){
if (closeMask) $.mask.close();
}
);
Luego, para mostrar la segunda superposición, establece la variable closeMask en false. Obviamente, la segunda superposición debe ocultar la máscara al cerrar.
Puede agregar "closeSpeed: 0" en la configuración de máscara de la primera superposición y funcionará. Por ejemplo:
$('#login_overlay').overlay({
top:'center',
mask: {
color: '#666',
closeSpeed: 0,
opacity: 0.5
}
});
Creo que una forma más fácil sería
.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');
}
}
});
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.