superposición de herramientas jquery, cómo mantener la máscara al cambiar las superposiciones

Question

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.

javascript jquery overlay jquery-tools

2

Peter 10 jun. 2011 a las 13:37

Answer 1

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.

4

Mark McLaren 1 jul. 2011 a las 22:57

Answer 2

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.

1

coderazzi 21 jul. 2011 a las 14:10

Answer 3

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

2

Florian Cristian Uscatu 16 oct. 2014 a las 20:23

Answer 4

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

6

Platipuss 27 jul. 2011 a las 21:43

superposición de herramientas jquery, cómo mantener la máscara al cambiar las superposiciones

4 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript