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