Demo Online
Download Code
- 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