Replete Modal Documentation

• Created: 20/08/2021
• By: ThemeSelection

Replete Modal is a user-friendly, fully customizable, responsive jQuery popup modal to take any HTML content, including images, videos, SVG icons,forms and display it in a clean organized and responsive popup. It is easy, flexible, powerful to create professional looking popup modal. This plugin features plenty of layouts, CSS transitions, 9 Position, 40+ animations, 5 Overlay, 10 Modal Layouts, 10 Modal Types, 35+ SVG Icons and much more.

If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form here.

Integration

1. Download the zipped pack from ThemeSelection and extract to a folder on your computer.
2. You need to include necessary css and js files to your project.

   <link rel="stylesheet" href="css/animate.css">
   <link rel="stylesheet" href="css/replete-modal.css">
   	
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script src="js/replete-modal.min.js"></script>

3. Copy code of any example modal.
4. Replace demo content with yours.

Script structure

The script structure of the modal is very easy. Add arguments and it's value according to requirement.

$('.className').on('click',function(){
	rplm({
		title: "Title Goes Here",
		text: "Any Content Or HTML structure",
		html: true,
		showCancelButton: true
	});
});

Here, rplm({ ... }); is required to use for Replete Modal.

Modal Configuration

There are many configuration for replete modal. To use any of them, you need to add the appropriate argument to the script. All available configuration options listed in the table below.

Modal Methods

There are few simple but important methods for replete modal.

How to Callback

Let's say, If you want to submit Single Value using callback :

$('.className').on('click',function(){
	rplm({
		.....
		.....
	}, function(){
		email = $('.rplm-alert .email').val();
	});
});

If you want to submit Serialized Form Fields using callback :

$('.className').on('click',function(){
	rplm({
		.....
		.....
	}, function(){
		$('.rplm-alert form.login').serialize();
	});
});

If you want to submit Form using callback :

$('.className').on('click',function(){
	rplm({
		.....
		.....
	}, function(){
		$('.rplm-alert form.login').submit();
	});
});

If you want to use callback on submit & Cancel :

$('.className').on('click',function(){
	rplm({
		.....
		.....
	}, function(isConfirm){
		if (isConfirm) {
			// Confirm Callback
		}
		else{
			// Cancel Callback
		}
	});
});

If you want to submit data using AJAX :

$('.className').on('click',function(){
	rplm({
		.....
		.....
	},function(){
		// Ajax call
		$.ajax({
			url: "test.php", // File Path
			data: $('.rplm-alert form.CLASSNAME').serialize(),
			method: "post", // post/get
		}).done(function() {
			// Completion Message
		});
	});
});

Events

On PageLoad Modal :

$( document ).ready(function() {
   rplm({
		.....
		.....
	});
});

On MouseLeave Modal :

$('html').mouseleave(function() {
	rplm({
		.....
		.....
	});
});

Set Cookie

To set cookie on load and on click of link, use options described in configuration. You can check all options Here. Here you can see an example image of "block modal" on a link click

You can change link text, cookie name according to your choice else it will use default value as displayed Here.

Let's say, you want to block modal on click of the link :

$('.className').on('click',function(){
	rplm({
		title: "Block Pop-up",
		text: "Custom Text here.",
		preventDialog: true,
		cookieName: "blockModal",
		preventText: "Block This Pop-up.",
		preventDays: 30,
	});
});

This will set "blockModal" cookie for next "30" days. So you won't be able to open this dialog till 30 days.

Display Pop up only once

Following are the option to set up Modal to display Only once.

$('.className').on('click',function(){
	rplm({
		title: "Block Pop-up",
		text: "Custom Text here.",
		oneTimePopUp: true,
	});
});

Modal Positions

There are 9 positions for replete modal. To use any of them, you need to add the appropriate value to the position attribute. All available positions and options listed in the table below.

Let's say, you want to set modal on Bottom Center :

$('.className').on('click',function(){
	rplm({
		title: "Bottom Center",
		text: "Custom Text here.",
		position:'bottomCenter',
	});
});

Overlay

You have to add overlay argument to set different overlay values. Check overlay options in below table.

Let's say, you want to set modal overlay as custom :

$('.className').on('click',function(){
	rplm({
		title: "Overlay Demo",
		text: "Custom Text here.",
		overlay: 'custom',
		customOverlayColor: '#FFA7EC',
	});
});

If you set overlay as custom then only customOverlayColor attribute will work.

Modal Styles

There are some modal styles that will make the modal very attractive and you can find all the options and description in table below. Just set this option values for 'modalNOverlay' argument.

Let's say, you want to set modal with custom color:

$('.className').on('click',function(){
	rplm({
		title: "Overlay Demo",
		text: "Custom Text here.",
		modalNOverlay: 'custom',
		customModalColor: '#FFA7EC',
	});
});

If you set modalNOverlay as custom then only customModalcolor attribute will work.

Animations

There are 40+ different Modal Animations. To use any of them,use animation attribute and add appropriate animation value to attribute. All available Effects and details listed below :

Below is the example showing how to use animation effects. Let's say, If want to set jello animation to the modal.

$('.className').on('click',function(){
	rplm({
		title: "Jello Effect",
		text: 'This is an example of jello effect modal.',
		showCancelButton: true,
		animation: 'jello',
	});
});

Google Map

To implement Google map, you need to set type="map", latitude, longitude and zoom level.

$('.className').on('click',function(){
	rplm({
		title: "Google Map",
			text: '<div id="map" style="width:100%;height:400px;"></div>',
			type: 'map',
			lat: 23.0060,
			lng: 72.6011,
			zoom: 10,
			html: true,
	});
});

You need to set text='<div id="map" style="width:100%;height:400px;"></div>'. You can change height accordingly.

If you set type='map' then set lat(latitude), lng(longitude) and zoom level.

YouTube

To add YouTube Video, you need to use some parameters like youtubeID, videoHeight and videoWidth. Check example given below :

$('.className').on('click',function(){
	rplm({
		title: "YouTube Video",
			youtubeID: "YOUTUBE_VIDEO_ID", 
		videoHeight: "YOUTUBE_VIDEO_HEIGHT",
		videoWidth: "YOUTUBE_VIDEO_WIDTH",
		html: true,
	});
});

No need to create text attribute as that will be created automatically using YouTubeID,Height and Width.

Vimeo

To add YouTube Video, you need to use some parameters like vimeoID, videoHeight and videoWidth. Check example given below :

$('.className').on('click',function(){
	rplm({
		title: "Vimeo Video",
			vimeoID: "VIMEO_VIDEO_ID", 
		videoHeight: "VIMEO_VIDEO_HEIGHT",
		videoWidth: "VIMEO_VIDEO_WIDTH",
		html: true,
	});
});

No need to create text attribute as that will be created automatically using VimeoID,Height and Width.

Check youtube and vimeo examples for better idea.

SVG Icons

There are 35+ SVG icons in Replete Modal. To use this icon, just need to set svgIcon attribute and need to add svg Icon name that is displayed in below table.

Below is the example showing how to use SVG icon. Let's say, If want to set rocket icon to the modal.

$('.className').on('click',function(){
	rplm({
		title: "SVG Icon",
		text: 'SVG Demo content.',
		svgIcon: 'rocket',
	});
});

Delay

delay is an option that will make the modal to delay in open.

$('.className').on('click',function(){
	rplm({
		title: "Delay Demo",
		text: 'Delay Demo content.',
		delay: 1,
	});
});

This will delay modal open to 1 seconds.

Duration

duration is an option to open the modal slowly.

$('.className').on('click',function(){
	rplm({
		title: "Duration Demo",
		text: 'Duration Demo content.',
		duration: 2,
	});
});

This will open modal slowly in 2 seconds.

Credits

Icon and font Credits

• Quicksand

Image and Video Credits

• Pixabay
• YouTube
• Vimeo