1. Please make sure you are in development mode. Go to the end of your HTML file and make sure the "data-main" of the script is set to "script.js" instead if "script.min.js".
2. Open your HTML file and search for the "products-modals" class and add inside that <div> another <div> witht the "custom-modal js-custom-modal" classes like shown in the screenshot.
3. Add somewhere in your CSS code these lines of code.
.custom-modal{ position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background-color: #f1f1f1; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform .7s cubic-bezier(.7, 0, .3, 1); -moz-transition: -moz-transform .7s cubic-bezier(.7, 0, .3, 1); -ms-transition: -ms-transform .7s cubic-bezier(.7, 0, .3, 1); -o-transition: -o-transform .7s cubic-bezier(.7, 0, .3, 1); transition: transform .7s cubic-bezier(.7, 0, .3, 1); } .custom-modal.active { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
4. Open the "js/components/basicBind.js" and inside the "basicUiActions" function add these lines of code like shown in the screenshot.
$(".js-custom-modal").on("open", function () { $(this).addClass("active"); }).on("close", function () { $(this).removeClass("active"); });
5. Now you can add any HTML code within the ".custom-modal" element and open/close the modal using this micro API:
// Open the modal $(".js-custom-modal").trigger("open"); // Close the modal $(".js-custom-modal").trigger("close");