How to add a custom modal?


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");

 

 

 

Tags: custom, modal, triablo

Last update:
2016-04-05 10:50
Author:
Vlad Sargu
Revision:
1.1
Average rating:0 (0 Votes)