Question

I am using JQuery Overlay from FlowPlayer.

I have this that opens my overlay:

<a rel="#overlay1" class="miniOpenBtn">Open</a>
$("a[rel]").overlay({mask: '#EFEFEF'});

I am bored of the standard close button and would like to add my own button, that’s positioned anywhere inside my overlay:

<a id="closeOverlay" class="miniCloseBtn">x</a>

How can I get this link to close the overlay?

I looked at the documentation and they only give an example of replacing the original close button in the corner of the overlay, using class “close”. I want to get rid of that original close button altogether and place additional ones inside the overlay.

I have looked at some old answers here on StackOverflow but having only started to learn JQuery last week, it’s a little confusing to say the least.

Any help gratefully received.

Answer 1

I tried this and got it working, after a long hard search in their forums. By applying (close:”a.closeOverlayBtn”), it allows me to use a different button for closing the overlay.

The JQuery

$("a[rel]").overlay({
mask: '#EFEFEF',
close: "a.closeOverlayBtn"
});

The Overlay Close Button

<a class="closeOverlayBtn" onclick="flashElement(<%=rsPhotoData.Fields("photoID")%>)">
x
</a>

Which as you can see allows me to call JS functions using my close button, the original one didn’t easily allow this.