Tip: V4 Create Popups using JQuery

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


<br />
<a data-ca-target-id="popup-1" class="cm-dialog-opener cm-dialog-auto-size">click here for popup</a><br />
<div class="product-options hidden" id="popup-1" title="Title of Pop Up"><br />
<p>More content here, this is the body of the popup.</p><br />
</div><br />

```<br />
That's it. So simple, yet so effective! The pop-up size can be hardcoded (ie. in the <div> set a style="width:500px") or leave it as it is and the pop-up automatically resizes as per the content in the <div>. Magic!<br />
<br />
If you want to add more popups to a page, just ensure the ID ("popup-1") matches in both the <a> and the <div>.<br />
<br />
Better still...if you're smart, you can use the HTML Block with Smarty Support to fill your popup with literally any content you wish (products, categories, anything!).<br />
<br />
Demo: See the CS-Cart demo, click the Terms and Conditions link in Checkout Step 4. Or see my attachment for a quick view of how it looks without any custom styling.<br />
[attachment=7168:popup.png]<p><a href="127.0.0.1/uploads/monthly_09_2013/post-17808-0-72141700-1378333638.png">popup.png</a></p>

Nice. Good tip.

[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

[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.

nice, maybe i can further my verified by visa now

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

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

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.