jQuery Tools: How to close an overlay?
Solution 1
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.
Solution 2
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();
Solution 3
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();
Solution 4
Try
$("a[rel]").data("overlay").close();
I use this to close my overlays.
Solution 5
It will work for you, Please refer code here,
var api = $("a[rel]").data("overlay");
api.close();//close this overlay
Reference :
Rookian
Software Architect Interested in everything around Azure (esp. Infrastructure as Code) Web APIs Software Architecture Software Design
Updated on July 09, 2022Comments
-
Rookian almost 2 years
$("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.
-
Rookian almost 14 yearsunfortunately this does not work for me. I edited my question. Maybe you know what is wrong there.
-
Nick Craver almost 14 years@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.
-
Rookian almost 14 yearsI 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?
-
Nick Craver almost 14 years@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. -
RredCat almost 13 yearsWorks for me. Closes overlay by class name. Thanks!