Tip: V4 Create Popups using JQuery

Store Builder in detail Hints & Modifications
#1

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:-


```php

click here for popup


More content here, this is the body of the popup.



```
That's it. So simple, yet so effective! The pop-up size can be hardcoded (ie. in the
set a style="width:500px") or leave it as it is and the pop-up automatically resizes as per the content in the
. Magic!

If you want to add more popups to a page, just ensure the ID ("popup-1") matches in both the and the
#2

Nice. Good tip.

#3

[quote name='StellarBytes' timestamp='1378333188' post='167751']

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:-


```php

click here for popup


More content here, this is the body of the popup.



```
That's it. So simple, yet so effective! The pop-up size can be hardcoded (ie. in the
set a style="width:500px") or leave it as it is and the pop-up automatically resizes as per the content in the
. Magic!

If you want to add more popups to a page, just ensure the ID ("popup-1") matches in both the and the
#4

[quote name='vanderex' timestamp='1379009343' post='168157']

you mean call it with



click here for popup

?[/quote]

Yes, the hyperlink text “click here for popup” would therefore launch the popup.

[quote name='vanderex' timestamp='1379009343' post='168157']

how baout passing info to the popup ? can this be done ?

[/quote]

No reason why not.

[quote name='vanderex' timestamp='1379009343' post='168157']

is this the fadeover popup or a REAL popup ?



i need a modal window popup

[/quote]

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.

#5

nice, maybe i can further my verified by visa now

#6

Hi StellarBytes

I am new to this and trying to implement this Popup.

Are you able to explain it in a bit more detail.

Thanks

#7

Follow the KB guide for How to create a block then apply the guide as above.

#8

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.