A nice little trick for V4. Create neat popups using jQuery, without any template edits or other modifications, it's so simple! I was asked for this by a forum member last week but had not looked into it for V4. I recall this being used for the original “terms and conditions” pop-up link, which I had adapted and used in V2 for other purposes, but now I thought I would port it across to V4. The original V2 and subsequently V3 versions of this do not work, because syntax and class names have evolved. I thought I'd share this simple yet very effective little piece of code here…
Here's what you need to do:-
Create a new 'HTML Block'. For the content, use something like this:-
A nice little trick for V4. Create neat popups using jQuery, without any template edits or other modifications, it's so simple! I was asked for this by a forum member last week but had not looked into it for V4. I recall this being used for the original “terms and conditions” pop-up link, which I had adapted and used in V2 for other purposes, but now I thought I would port it across to V4. The original V2 and subsequently V3 versions of this do not work, because syntax and class names have evolved. I thought I'd share this simple yet very effective little piece of code here…
Here's what you need to do:-
Create a new 'HTML Block'. For the content, use something like this:-
It's a modal pop-up. See the screenshot in the OP. It has the same appearance and is controlled by the same jQuery as the 'Add to Cart' popup in V3 and V4.
Hint: Certain themes may call modal inside another element that is position:relative, causing it to act strangely. This is true for Vivashop in the product-info (options) area. If you have this problem try removing that from parent or wrapping in position: initial. THis is because position: absolute is relative to a position: relative parent. Also keep in mind that in the "absolute of the relative parent" state that overflow flags may cut off modal that is larger than parent.