Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Tip: V4 Create Popups using JQuery Rate Topic   * * * * * 2 votes

 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 04 September 2013 - 10:19 PM #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:-

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

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

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

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.
Attached File  popup.png   65.98KB   196 downloads
Hire StellarBytes for CS-Cart Design & Development Services

 
  • Scott_C
  • Senior Member
  • Members
  • Join Date: 23-Jun 11
  • 452 posts

Posted 05 September 2013 - 08:30 AM #2

Nice. Good tip.

 
  • vanderex
  • Senior Member
  • Members
  • Join Date: 27-May 10
  • 386 posts

Posted 12 September 2013 - 06:09 PM #3

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

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

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

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.
Attached File  popup.png   65.98KB   196 downloads


you mean call it with

<a data-ca-target-id="popup-1" class="cm-dialog-opener cm-dialog-auto-size">click here for popup</a>


?

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

is this the fadeover popup or a REAL popup ?

i need a modal window popup
Get Cost Effective Content Delivery CDN
Unbeatable speed, stats, & price
MaxCDN Site Acceleration

 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 12 September 2013 - 06:59 PM #4

you mean call it with

<a data-ca-target-id="popup-1" class="cm-dialog-opener cm-dialog-auto-size">click here for popup</a>
?

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

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

No reason why not.

is this the fadeover popup or a REAL popup ?

i need a modal window popup

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.
Hire StellarBytes for CS-Cart Design & Development Services

 
  • vanderex
  • Senior Member
  • Members
  • Join Date: 27-May 10
  • 386 posts

Posted 13 September 2013 - 02:32 PM #5

nice, maybe i can further my verified by visa now
Get Cost Effective Content Delivery CDN
Unbeatable speed, stats, & price
MaxCDN Site Acceleration

 
  • Stef
  • Newbie
  • Trial users
  • Join Date: 17-Oct 12
  • 6 posts

Posted 23 January 2014 - 04:32 AM #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

 
  • StellarBytes
  • Senior Member
  • Members
  • Join Date: 08-Aug 11
  • 1807 posts

Posted 23 January 2014 - 06:55 PM #7

Follow the KB guide for How to create a block then apply the guide as above.
Hire StellarBytes for CS-Cart Design & Development Services

 
  • fdo
  • Member
  • Members
  • Join Date: 12-Aug 15
  • 42 posts

Posted 27 November 2015 - 08:38 PM #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.