How to: Customize a Web Pop-up Using HTML, CSS and JavaScript
This article explains how more advanced users can use HTML, CSS and JavaScript to customize how web pop-ups look and behave.
HTML help
The HTML code contains the Experience URL which will be displayed in the overlay.
Pop-up Source (The Experience)
The following code references the Experience URL, which is provided by the Grow platform and is static for this Experience. This should never be changed.
<script src="https://x.wayin.com/embed/d23a131e-3584-56b4-cc5a-12835bce2825?mode=adaptive"></script>iframe settings
You can control and adjust the settings like the transparency, scrolling and border (remember to also include the embed.min.js script) by using this 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 pop-up
You need to include the code for displaying the overlay, which can be based on a web event, button click, or URL link.
Below are a few examples. You only need to include the code for the option that you wish to use for launching the overlay.
Sample code for triggering the pop-up from a button click:
<button onclick="showModal('sample-modal')">Sample Overlay</button>Sample code for triggering the pop-up 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 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 pop-up
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 doesn't 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.
Pop-up 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.
Example: The max-width is set to 500px (=the element will never be wider than 500px) and the height to 100% of the browser offset (viewport) height minus 40px (=the element's height will always fill the visible window, minus 40px—adjusting automatically when the user resizes the browser).
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 pop-up
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 the 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 (advanced embed code section) 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 pop-up based on a web event
If you wish to launch the overlay based on a web event, then you should include the code below 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 the 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 pop-up
Note: Automatic close on a backdrop click is activated by the function triggerDismiss, if a data-modal-dismiss attribute is included in the modal container.
