How to create a custom POPUP form with PHP & Ajax

Demo Online

4 years ago
Zaid Bin Khalid
26935 Views
18

Custom POPUP. There are so many plugins that you can use to call an ajax base form in a popup. In this post, I will create a simple lightweight Jquery based POPUP that you can use in your project. To show any kind of HTML data a simple form (contact us form), alert message or anything as per your need.

This lightweight POPUP creates with the help of JQuery and displays simple form using AJAX. As you know every plugin has many other options that you don’t need at all. So we create our own lightweight script.

Download Plugin.

Click on a file name to download plugin source files lightWeightPopup.js. Add stylesheet into your head tag and script files just before close the body tag </body>. This plugin is JQuery dependent so before plugin js, you need to add JQuery lib.

<link rel="stylesheet" href="lightweightpopup.css" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="lightWeightPopup.js"></script>

Plugin parameters

These parameters you need to set when you initialized the plugin. The plugin initialization is given below. You can call the plugin by ID or Class.

Options	Description	Data Attribute
href	An ajax URL	data-href
width	Popup Model width	data-width
height	Popup Model height	data-height
maxWidth	Popup Model max-width	data-maxWidth
maxHeight	Popup Model max-height	data-maxHeight
title	Popup Model Title	data-title
overlay	If set true model close on overlay click. The default value is true.	data-overlay
modelFixed	If set true model fixed at the top.	data-model-fixed
Top	The model top position can be set in pixel.	data-top

You can also use the data attribute to set plugin parameters. Show in the below code. The data-content is a must on the button you must add data-content with the value of ajax or inline. In inline you must pass the .inline class to the structure you want to show in POPUP.

<button type="button" id="popup" class="btn btn-primary mb-3" data-top="20" data-overlay="false" data-href="contact-us.html" data-content="ajax"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE AJAX</button>

<button type="button" id="inline" class="btn btn-danger mb-3" data-model-fixed="true" data-content="inline"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE INLINE</button>

<a href="javascript:;" id="ancher" data-href="contact-us.html" class="btn btn-primary mb-3" data-content="ajax"><i class="fa fa-fw fa-file-alt"></i> Ancher Tag AJAX</a>

<button type="button" id="iframe" data-href="https://www.youtube.com/embed/ZwKhufmMxko" class="btn btn-warning mb-3" data-content="iframe"><i class="fa fa-fw fa-file-alt"></i> Button Tag Iframe</button>

<a href="javascript:;" data-href="https://learncodeweb.com/web-development/how-to-create-a-custom-popup-form-with-php-and-ajax/" class="btn btn-dark mb-3 iframe" data-content="iframe"><i class="fa fa-fw fa-file-alt"></i> Ancher Tag Iframe</a>

The plugin initialization code is given below.

$(document).ready(function(e) {
	$("#popup").lightWeightPopup({href:"contact-us.html", overlay:false, width:"90%", maxWidth:"600px", title:"Ajax Model"});
	$("#inline").lightWeightPopup({title:"Inline Model", top:'50', width:'500px' });
	$("#ancher").lightWeightPopup({width:"95%", maxWidth:"320px", title:"Ajax Model"});
	$("#iframe").lightWeightPopup({href:"https://www.youtube.com/embed/N59KnLf2pbY", maxWidth:"600px", height:"400px", title:"Iframe Model"});
	$(".iframe").lightWeightPopup({width:"90%", height:"90%", title:"Iframe Model"});
});

Create a file with the name of lightWeightPopup.js and paste the below code in it. You can also download this file from here.

/**
** Author: ZAID BIN KHALID
** Website: https://learncodeweb.com
** Version: 0.1
**/

function closeDilog(action){
	if(action=="inline"){ 
		var inlineData	=	$('#lwpBody').html();
		setTimeout(function(){ $('body').find('.lwp-inline').html(inlineData);},100);
	}
	$('body').removeClass('lwp-hidden');
	$('.lwp').remove();
	$('.lwp-overlay').remove();
}

(function($){
	$.fn.lightWeightPopup = function(options) {
		var dset	=	{};
		
		$(this).on("click",function(){
			
			$("body").find('.lwp').remove();
			
			w	=	h	=	u	=	mw	=	mh	=	t	=	mf	=	pt	=	'';
			ol	=	true;
			var scrollVal	=	$(window).scrollTop();
			
			var dset	=	$(this).data();
			
			if(dset.width!="" && typeof dset.width !== "undefined"){	w	=	dset.width;}
			if(dset.height!="" && typeof dset.height !== "undefined"){	h	=	dset.height;}
			if(dset.href!="" && typeof dset.href !== "undefined"){u	=	dset.href;}
			if(dset.maxWidth!="" && typeof dset.maxWidth !== "undefined"){mw	=	dset.maxWidth;}
			if(dset.maxHeight!="" && typeof dset.maxHeight !== "undefined"){mh	=	dset.maxHeight;}
			if(dset.title!="" && typeof dset.title !== "undefined"){t	=	dset.title;}else{t	=	'Model';}
			if(dset.overlay==true && typeof dset.overlay !== "undefined"){ol	=	dset.overlay;}
			if(dset.modelFixed==true && typeof dset.modelFixed!== "undefined"){mf	=	'fixed';}
			if(dset.top!="" && typeof dset.top!== "undefined"){pt	=	dset.top;}
			
			var wh	=	parseInt(window.innerHeight)-parseInt(160);
			
			var settings	=	$.extend({
				href			:	u, //Ajax url
				width			:	w, //Container width
				height			:	h, //Container height
				maxWidth		:	mw, //Container title
				maxHeight		:	mh, //Container close text/icon
				title			:	t, //Model Title
				overlay			:	ol, //Model close when click on overlay
				modelFixed		:	mf,
				top				:	pt,
			},options);

			var sw	=	sh	=	smw	=	smh	=	setOL	=	setMF	=	setIFH	=	spt	=	'';
			
			if(settings.width!=""){
				var	sw	=	'width:'+settings.width+';';
			}
			if(settings.height!=""){
				var	sh	=	'height:'+settings.height+';';
			}
			if(settings.maxWidth!=""){
				var	smw	=	'max-width:'+settings.maxWidth+';';
			}
			if(settings.maxHeight!=""){
				var	smh	=	'max-height:'+settings.maxHeight+';';
			}
			if(settings.overlay==true){
				var setOL	=	'onclick="closeDilog(\''+dset.content+'\')"';
			}
			if(settings.modelFixed=='fixed'){
				var setMF		=	'style="height:'+wh+'px"';
			}
			if(dset.content=='iframe'){
				setIFH		=	'min-height:99%;';
			}
			if(settings.top!='' && settings.top!='0'){
				sumTop	=	(parseInt(settings.top)+parseInt(scrollVal));
				spt		=	'top:'+sumTop+'px;';
			}else{
				spt		=	'top:'+parseInt(scrollVal)+'px;';
			}
			
			$("body").append('<div class="lwp-overlay" '+setOL+'></div><div class="lwp" tabindex="-1" role="dialog" style="'+sw+' '+sh+' '+smw+' '+smh+' '+spt+'"><div id="lwp" style="'+setIFH+'"><div id="lwpHead"><div class="title">'+settings.title+'</div><div class="close" onclick="closeDilog(\''+dset.content+'\')"><span>×</span></div></div><div id="lwpBody" role="document" '+setMF+'><div class="loading"><img src="image/loader.gif"><p class="text">Please Wait..!</p></div></div></div></div>');
			if(settings.modelFixed){
				$('body').addClass('lwp-hidden');
			}
			if(dset.content=='ajax'){
				$.ajax({
					method	:	"POST",
					url		:	settings.href,
					success	:	function(data){
						if(data!=""){
							setTimeout(function(){$('#lwpBody').html(data);},1000);
						}
					}
				});
			}
			
			if(dset.content=='iframe'){
				var lwpHead	=	parseInt($('#lwpHead').innerHeight());
				var lwp		=	parseInt($('#lwp').innerHeight());
				var bh		=	parseInt(lwp)-parseInt(lwpHead*1);
				setTimeout(function(){ $('#lwpBody').html('<iframe frameborder="0" style="height:'+bh+'px; width:100%;" src="'+settings.href+'"></iframe>');},1000);
			}
			
			if(dset.content=='inline'){
				var data	=	$('body').find('.lwp-inline').html();
				if(data!=""){
					$('#lwpBody').html(data);
				}
				$('body').find('.lwp-inline').html('');
			}
		});
		
		
	
	};
}(jQuery));

The CSS code of the plugin is given below.

*{
	box-sizing:border-box;
}
.lwp-overlay{
	background:rgba(0,0,0,0.9);
    padding:5px;
    margin:0px auto;
    position:fixed;
    top:0;
    width:100%;
	height:100%;
	z-index:1070;
	overflow-x:hidden;
	overflow-y:auto;
}
.lwp{
	z-index:1072;
	position:absolute;
	left:0px;
	right:0;
	top:0;
	margin:0px auto;
}
.lwp .loading{
	text-align:center;
	color:#FFF;
}
.lwp .loading .text{
	color:#444;
}
.lwp #lwp{
	margin:0px auto;
	background:#FFF;
    border:5px solid #000;
	overflow-x:hidden;
	overflow-y:hidden;
	border-radius:5px;
	position:relative;
}
.lwp .lwpIframe{
    width: 100%;
    height: 100%;
	min-height: 100%;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
}
.lwp #lwpHead{
	display:grid;
	align-items:center;
	grid-template-columns: 1fr 50px;
    border-bottom: 1px solid #ddd;
}

.lwp #lwpHead .title{
    font-weight: bold;
	padding:10px;
}

.lwp #lwpHead .close{
	color: #fff;
    font-size: 25px;
	text-align:right;
    cursor: pointer;
    background: #000;
	padding:10px;
}
.lwp #lwpHead .close span{
	position: relative;
    left: -4px;
    top: -5px;
}
.lwp #lwpBody{
	overflow:auto;
}
.lwp #lwpClose{
	float:right;
}
.lwp .clear{
	clear:both;
}
.lwp-inline{
	display:none;
}
.lwp-hidden{
	overflow:hidden;
}

The HTML structure of the form. The below form does not function it is just an example you can create your own structure as per your need.

Remember: I am using Bootstrap 4 as a design framework. The below snippet is a bootstrap 4 code.

<div class="p-3">
	<form method="post">
		<div class="form-group">
			<label>First Name</label>
			<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
		</div>
		<div class="form-group">
			<label>Last Name</label>
			<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
		</div>
		<div class="form-group">
			<label>Email</label>
			<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
		</div>
		<div class="form-group">
			<label>Message</label>
			<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
		</div>
		<div class="form-group">
			<input type="button" name="button" value="Submit" class="btn btn-danger">
		</div>
	</form>
</div>

Demo Online Download Code

4 years ago
Zaid Bin Khalid
26935 Views
18

Prev Next

Related Linkes

How to create a custom POPUP form with PHP & Ajax