This article explains how more advanced users can use HTML, CSS and JavaScript to customize how web popups look and behave.
HTML HELP
The HTML code contains the experience URL which will be displayed in the overlay.
Popup Source (The Experience)
The following code references the experience URL, which is provided by the Marigold Grow platform and is static for this experience. This should never be changed.
<script src="https://x.wayin.com/embed/e19f271f-7313-46f1-bb3e-01713fbe3914?mode=adaptive"></script>
iframe settings
You can control and adjust the settings like the transparency, scrolling and border (remember to also include "embed.min.js script") by using the below code and changing the parameters as required:
<iframe
src="https://x.wayin.com/display/container/dc/495c8543-7767-4ad5-9a67-3dbc72cc7551?mode=adaptive"
id="ngxFrame495c8543-7767-4ad5-9a67-3dbc72cc7551"
frameborder="0"
scrolling="no"
allowTransparency="true"
>
</iframe>
<script src="https://x.wayin.com/ui/ngx.embed.min.js"></script>
Launching the web popup
You would need to include the code for displaying the overlay, which could be based on a web event, button click, or URL link. Here are a few examples, and you would only need to include the code for the option that you wish to use for launching the overlay:
Sample code for triggering the popup from a button click:
<button onclick="showModal('sample-modal')">Sample Overlay</button>
Sample code for triggering the popup from an URL link:
<a href="#" onclick="showModal('sample-modal')">Sample Overlay from link</a>
If you wish to launch the web overlay based on a web event, you will need to include the eventListener code in the javascript to trigger the showModal function based on a web event (please refer to the javascript section).
Closing the popup
If you want the users to close the overlay only by clicking a cross button, please remove the "data-modal-dismiss" attribute from the ".modal" container (so the Overlay does not close on a backdrop click).However, if you want the users to close an overlay by clicking on the backdrop outside the overlay, please remove the cross button from the HTML code, i.e. remove the following code:
<button class="modal__close" onclick="hideModal()">×</button>
Scripts responsible for these close actions need to be included in the Javascript, as provided in the Javascript section.
Cross icon styles should be included in the CSS section inside of the ".modal__close" class. If you are not using the cross icon/button to close, then there is no need to include these styles in the Javascript and CSS.
CSS HELP
The CSS Code contains the style example needed by the display containers. You can include this information inline in the main CSS or include this as an additional CSS file.
Popup dimensions
You can change the dimensions of the overlay by setting the "max-width" and/or "height" of the ".modal__dialog" CSS class as required.
In the below example, the max width is set to 500px and height to 100% of the browser offset height - 40px.
Backdrop
Background color and opacity of the backdrop can be changed inside of the class ".modal":
.modal {
...
background: rgba(100, 100, 100, 0.5)
...
Closing the popup
If you are using a cross icon/button to close the overlay, you can change the position of the cross icon by changing the styles in the ".modal__close" class.
To move it inside of the modal, you can change the values of the top and right properties as required, for example:
.modal__close {
top: 5px;
right: 5px;
...
Fading in and out
"@keyframes fadeIn" gives an ability to adjust opacity animation on appearance of the overlay.
JAVASCRIPT HELP
The Javascript code contains the functionality for displaying the overlay and for closing the overlay based on "showModal" and "hideModal" functions.
Adding the JavaScript
The sample Javascript code displayed on the left needs to be included in your Web page for the Web Overlay to function. You can include the Javascript code in a separate javascript file, for example:
<script type="text/javascript" src="{path-to-the-file}"></script>
Alternatively, you can include the Javascript by adding a script directly to your markup file (HTML):
<script>{code}</script>
Launching the popup based on a web event
If you wish to launch the overlay based on a web event, then you should include the below code to listen to the event and launch the overlay:
element.addEventListener(event, function () {
showModal('sample-modal');
});
The element can be any element on your web page, for example document, window, button, link, image, etc (you can also use document.getElementById function)
The event is the event on that particular element that you wish to use to display the overlay. For example, click, dblclick (double click), mouseover, mouseout etc.
Closing the popup
Note: Automatic close on a backdrop click is activated by the function "triggerDismiss", if a "data-modal-dismiss" attribute is included to the modal container.
