jquery工具覆盖，如何在切换覆盖时保留蒙版

发布于 2024-11-15 05:17:33 字数 1112 浏览 5 评论 0原文

我有一个简单的问题，有 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();

}

正如您所看到的，还有第二个覆盖层的确认版本，但其工作原理与错误覆盖层相同。

原文

I have a simple problem with 2 overlays. One overlay is triggered from (and by) the other overlay. As only one overlay can be active at any one time, correctly so, overlay number 1 that triggered 2 closes. However, it takes the mask with it and hence overlay 2 appears without the mask. How can I switch between 2 overlays without the mask disappearing?

The code, overlay 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'       

});

And overlay 2

var errOverlayObject = $('#error_overlay').overlay({

    api: true,      
    mask: {
        maskId: 'defaultMask' ,
        color: null
    },
    effect: "apple"

});

function errorOverlay() {

    errOverlayObject.load();

}

As you can see there is also a confirm version of the second overlay, but that works identical to the error one.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甚是思念 2024-11-22 05:17:33

我认为更简单的方法是

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

I think an easier way would be to

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

回复收藏 0 原文

挽手叙旧 2024-11-22 05:17:33

我希望你不介意，但我创建了自己的简化示例。希望您能够根据您的情况进行调整。

对话框之间有一点闪烁（由于动画效果），但遮罩保持在原位。我想您可以通过调整动画效果设置来消除闪烁 - 我怀疑您可以在叠加层的 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>

我希望这有帮助。

I hope you do not mind but I created my own simplified example. Hopefully you will be able to adapt this to your situation.

There is a little bit of flicker between the dialogue boxes (due to the animation effect) but the mask stays in place. I imagine you could remove the flickering by adjusting the animation effect settings - I suspect you could do something in the overlay's onBeforeLoad method but I'm not exactly sure what.

<!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>

I hope this helps.

回复收藏 0 原文

哭泣的笑容 2024-11-22 05:17:33

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

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

You can add "closeSpeed: 0" into mask configuration of the first overlay and it will work.
For example:

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

回复收藏 0 原文

疯到世界奔溃 2024-11-22 05:17:33

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

您的第一个覆盖层需要进行如下设置：

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

然后，为了显示第二个覆盖层，您将 closeMask 变量设置为 false。显然，第二个覆盖层必须在关闭时隐藏遮罩。

An alternative is to handle separately the mask: the overlay is created without a mask, and the mask is activated separately.

Your first overlay would require a setup such as:

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

Then, in order to show the second overlay, you set the closeMask variable to false. Obviously, the second overlay must hide the mask on close.

回复收藏 0 原文

~没有更多了~