Наложение инструментов jquery, как сохранить маску при переключении наложений

У меня простая проблема с 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();

}

Как вы можете видеть, есть и подтверждающая версия второго оверлея, но она работает так же, как и версия с ошибкой.


javascript overlay jquery jquery-tools
person Peter    schedule 10.06.2011    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Надеюсь, вы не против, но я создал свой упрощенный пример. Надеюсь, вы сможете адаптировать это к вашей ситуации.

Между диалоговыми окнами есть небольшое мерцание (из-за эффекта анимации), но маска остается на месте. Я предполагаю, что вы могли бы удалить мерцание, настроив параметры эффекта анимации - я подозреваю, что вы могли бы сделать что-то в методе 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>

Надеюсь, это поможет.

person Mark McLaren    schedule 01.07.2011
comment
Это точно. И я не против мерцания, так как оно подчеркивает тот факт, что происходит что-то достойное вашего внимания. Однако я немного упростил предложение onClose, манипулируя маской и, таким образом, не нуждаясь в части идентификатора вашего кода, с помощью msk.css({ 'display': 'block', 'z-index': '1000' }); Другим важным небольшим изменением, необходимым в моем коде, было onclose, закрывающее маску в триггерах оверлея для вторичных оверлеев (ошибка и подтверждение). Но теперь все работает, огромное спасибо! - person Peter; 04.07.2011

arrow_upward
6
arrow_downward

Я думаю, что проще было бы

.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');
       }
   }
});
person Platipuss    schedule 27.07.2011

arrow_upward
2
arrow_downward

Вы можете добавить «closeSpeed: 0» в конфигурацию маски первого оверлея, и это будет работать. Например:

    $('#login_overlay').overlay({
        top:'center',
        mask: {
            color: '#666',
            closeSpeed: 0,
            opacity: 0.5
        }
    });
person Florian Cristian Uscatu    schedule 16.10.2014

arrow_upward
1
arrow_downward

Альтернативой является отдельная обработка маски: наложение создается без маски, и маска активируется отдельно.

Для вашего первого наложения потребуются такие настройки, как:

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

Затем, чтобы показать второе наложение, вы устанавливаете переменную closeMask в false. Очевидно, что второе наложение должно скрывать маску при закрытии.

person coderazzi    schedule 21.07.2011