Close Pop-up Automatically

[Chris M]

One of the main reasons I try not use 'Close Pop-up Automatically' in the Settings is because thumbs invariably tap the screen to close the pop-up on the same spot as the link to open it in the first place. This results in an annoying "go away!" "NO!" argument between visitor and pop-up.

Is there a nifty trick to allow the autmatic closing without having to tap away from the initial link?

I'm aware I can un-tick the box and use the cross to close, and/or use the (lock) and popup:close method; which is my usual weapon of choice.

[siran]

You could put a 99% transparent rectangle covering the opening button below your content on the popup layer with a link to close the popup. But the user would still have to move the mouse a tiny bit to be able to close the popup.

[Chris M]

You could put a 99% transparent rectangle covering the opening button below your content on the popup layer with a link to close the popup. But the user would still have to move the mouse a tiny bit to be able to close the popup.

Do you mean use the 'layer(lock)' and add the trasparency on the top of the pop-up layer with a 'popup:close' link?

[Initiostar]

You could use a jQuery toggle as a link that hides and shows a layer's objects e.g. https://initiostar.co.uk/demo/JSPop/ | JS - PopUp Box.xar

Works just the same as a popup, but opens and closes with a toggle on the link. Can use the same hide code to mimic "popup: close too". The upside here is that you can have any number of animations on the popup.

The idea is courtesy of Acorn from a while back.

Gary

[siran]

Yes, I meant to use popup:close but only on a rectangle just covering the button that initially opened the popup. No need for (lock) from my point of view.
If you like you can place it above the popup layer content covering it, but that wasn't my idea, and this would not allow the user to select the layer content.
You could also use a placehoder with position:fixed covering the full browser window.

[Chris M]

Yes, I meant to use popup:close but only on a rectangle just covering the button that initially opened the popup. No need for (lock) from my point of view.
If you like you can place it above the popup layer content covering it, but that wasn't my idea, and this would not allow the user to select the layer content.
You could also use a placehoder with position:fixed covering the full browser window.

Aaah, right, got it. I'll give that a try and let you know.

Gary, I remember the toggle script well, had a lot of fun with it. In this case I'm linking info pages to 15 DJs that are likely to change as some leave or get replaced. The link 'button' is a profile pic of the individual DJ. Fine on desktop, but on mobile the pic virtually fills the width of the sceen and 1/3 of the height. I'm wanting to drop a new pic onto the existing one to change and then simply copy paste the new text over the old. Swap the Press Kit download and Bob's your uncle.

[Chris M]

Yes, I meant to use popup:close but only on a rectangle just covering the button that initially opened the popup. No need for (lock) from my point of view.
If you like you can place it above the popup layer content covering it, but that wasn't my idea, and this would not allow the user to select the layer content.
You could also use a placehoder with position:fixed covering the full browser window.

Going with the simplest (for me) method.
No (lock) in the layer name.
Copy profile pic (link 'button') and paste in place on pop-up layer with popup:close typed in Utilities > Web Properties > Link > Link To Web or Email Address
Add 99% transparency

I can now simply copy/paste onto the rest, sit back with a beer and toast siran for saving me 10 minutes on this job and educating myself and others for future use.

[Acorn]

Going with the simplest (for me) method.
No (lock) in the layer name.
Copy profile pic (link 'button') and paste in place on pop-up layer with popup:close typed in Utilities > Web Properties > Link > Link To Web or Email Address
Add 99% transparency

I can now simply copy/paste onto the rest, sit back with a beer and toast siran for saving me 10 minutes on this job and educating myself and others for future use.

Its disadvantage as mntioned by @siran is the clicked item remain in-focus or is the target until you move the pointer (or thumb) slightly.

For that reason, I usually choose the javascript: void $('.<ClassName>').fadeToggle(timed); approach.
Its downsides are you need jQuery loaded but this is usually not an overhead as it is invoked by a lot of Xara events already. You have to name everything you want to "pop-up" with a ClassName. You are introducing code to initially hide the "pop-up" and to toggle thereafter.

My second approach is to use the undocumented popup: mechanism.
To get a fade in/out effect you have to name the popup layer with a fade parameter, e.g., 'pu (fade 1)'.
The MouseOff trigger becomes 'popup: open "pu (fade 1)"'.
On the "pu (fade 1)" layer, its trigger is simply 'popup: close'.
Xara does the rest.

You still have the in-focus/target issue.

Rather than just a transparency shape, I usually clone the under image and change the transparency type for different effects.

I have made the original Covoxer Tweaks Thread sticky again for reference as it is still valid.

acorn

[Chris M]

I used the second method, Acorn, but let Xara look after the layer animation Utilities > Web Properties > Link > Pop-Up Layer > Settings.

I considered popuppen, but didn't see an advantage over letting Xara do the job in this case. Now if the layer had sticky objects that breaks Xara's reveal animations I would have.

The javascript has too many different elements in too many different places for this simple job. Manipulating code doesn't come naturally to me. When I use it, I use it by blindly pasting stuff where I'm told and hope the Pixi dust doesn't blow away.

[behzad]

I hate popups, but had to do one for a client. clearsoundhearing.ca