jQuery Tools: How to close an overlay?

Question

$("a[rel]").getOverlay().close();
$("a[rel]").close();

Both don't work.

$(document).ready(function () {
        $("a[rel]").overlay({
            mask: '#3B5872',
            effect: 'apple',
            onBeforeLoad: function () {
                var wrap = this.getOverlay().find(".contentWrap");
                wrap.load(this.getTrigger().attr("href"));
            },
            onLoad: function () {
                $('.contentWrap form').submit(function (event) {
                    event.preventDefault();
                    $("a[rel]").overlay().close();
                    hijack(this, update_employees, "html");
                });
            }
        });
    });

    function hijack(form, callback, format) {
        $.ajax({
            url: form.action,
            type: form.method,
            dataType: format,
            data: $(form).serialize(),
            success: callback
        });
    }

    function update_employees(result) {
        $("#gridcontainer").html(result);
    }

Any suggestions?

I use Chrome because the onLoad event seems not work correctly in FF.

score 18 · Accepted Answer · answered Jul 16 '10 at 16:10

18

Like this:

$("a[rel]").overlay().close();

For most of their scripting you call the original method, e.g. .overlay() then call the method you want on that object.

answered Jul 16 '10 at 16:10

Nick Craver

623,446
136
1,297
1,155

unfortunately this does not work for me. I edited my question. Maybe you know what is wrong there. – Rookian Jul 16 '10 at 16:18
@Rookian - Are you getting a javascript error elsewhere? The api is pretty straight forward, I tested the above against several sites...looks like something else is interfering. – Nick Craver Jul 16 '10 at 16:32
I have found the problem. I have more then one "a[rel]" element in my page. I have several edit buttons in a table and a create button that matches the "a[rel]" selector. How do I detect which "a[rel]" element is clicked or how do I cache the jQuery overlay that is popped up? – Rookian Jul 18 '10 at 11:48
2

@Rookian - It *should* close all of them, but you could add a click handler to `a[rel]`, like this: `var overlayElem; $('a[rel]').click(function() { overlayElem = $(this); });` then when you want to close, `overlayElem.overlay().close();`, `overlayElem` being a global variable holding the last opened overlay. – Nick Craver Jul 18 '10 at 12:04

score 10 · Answer 2 · answered Jul 16 '10 at 17:01

10

You need to set api:true in properties if you want to close it from js:

var overlay = $("a[rel]").overlay({
    ...
    api:true
});

overlay.close();

answered Jul 16 '10 at 17:01

serg

109,619
77
317
330

Works for me. Closes overlay by class name. Thanks! – RredCat Jun 01 '11 at 08:31

coderazzi · Answer 3 · 2011-07-20T03:25:29.190

The problem, in case of assigning the overlay to a class, is that there will be many overlay elements, so all must be closed:

$.each($(".caddy_grid"), function(i, v){$(v).overlay().close();})

Alternatively, it is possible to simulate a click on the close button:

The class that triggers the overlay in my case is caddy_grid_overlay, so the close button can be accessed as:

$('.caddy_grid_overlay .close').click();

score 2 · Answer 4 · edited Jun 19 '12 at 06:57

2

It will work for you, Please refer code here,

var api = $("a[rel]").data("overlay");

api.close();//close this overlay

Reference :

http://jquerytools.org/documentation/overlay/index.html#api

http://jquerytools.org/documentation/scripting.html

edited Jun 19 '12 at 06:57

Umesh Aawte

4,590
7
41
51

answered Jun 19 '12 at 04:21

AndyTran2222

21
2

score 2 · Answer 5 · edited Sep 06 '11 at 14:11

2

Try

$("a[rel]").data("overlay").close();

I use this to close my overlays.

source : http://forum.jquery.com/topic/having-trouble-timing-jquery-tools-overlay-to-close-after-a-few-seconds

edited Sep 06 '11 at 14:11

Parrots

26,658
14
59
78

answered Sep 05 '11 at 16:30

Kowlown

920
10
26

score 1 · Answer 6 · edited Mar 27 '12 at 22:35

 $(document).ready(function() { 
    var overlayObject = $("a[rel]").overlay({ 
        top: 50,
        expose: {
                    color: '#232323',
                    closeOnClick: true
                },

                onClose:function() {   
                    $('#reg-login').hide();
                    $('#reg-register').hide();
                },
        effect: 'apple'
 });

score 0 · Answer 7 · answered Dec 24 '14 at 21:16

you can create a function and call it from anywher you want.

this function gonna work based on class name and a link.

function closeOverlay() { alert('aa'); var overlay = $(\"a.ShowOverlay\").overlay({ api:true });
    overlay.close();
}

jQuery Tools: How to close an overlay?

7 Answers7