How to incorporate page elements into a pop up modal?

utk-utkdas

Dec 11th, 2019 09:59 AM

I'm trying to incorporate some page elements into an exit modal dynamically for all my product pages. How can this be done?

Below are the requirements I'm trying to solve for.

The following items need their src to be delivered to the modal dynamically, so it updates on each Product page. The image The SKU/Model #

Model Description Add to Cart CTA

The last 3 items that needs to be coded are: A cookie, so when a customer clicks 'Keep Shopping' the modal doesn't continue to fire when they want to leave the page. The 'mouseenter' event listener to be applied for the nav bar and the footer.

ramyad-yadav

Dec 11th, 2019 11:31 AM

Before we begin, let's figure out the difference between the two.

A Popup is a small (or not) window that displays some kind of information in it. Usually it is displayed over other content, like chart or map, but in general does not obstruct interactivity with it. E.g. you can still interact with the chart around the Popup.

There can be any number of popups displayed at any given time.

A Modal is much more stricter. If there's a Modal open, you don't get to do anything with the chart until Modal is closed. There can be only one Modal at the same time.

Popup or Modal itself is an HTML element, which means that content can also be full-fledged HTML. You can use images, tables, iframes, and anything else HTML standard offers. Its appearance is configured using CSS.

  1. To open a Popup, we'll use chart's openPopup(content, title). To close a Popup we can call its close() method. To close a Popup we can call its close() method.
  2. Opening a modal works in much the same way, except we'll be using openModal(content, title). Similarly, closing a modal is as simple as calling its close() method.
emily-jonas

Dec 20th, 2019 05:10 AM

The Modal plugin is a dialog box/popup window that is displayed on top of the current page Upsers

fisat-satyra

Dec 27th, 2019 07:45 PM

Opening a modal works in much the same way, except we'll be using openModal(content, title). Similarly, closing a modal is as simple as calling its close() method.