Skip to content

Commit 9ede617

Browse files
mianzaidmianzaid
authored
Add files via upload
1 parent a896fcd commit 9ede617

3 files changed

Lines changed: 93 additions & 29 deletions

File tree

‎css/lightweightpopup.css‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
margin:0px auto;
55
position:fixed;
66
top:0;
7-
z-index:1025;
87
width:100%;
98
height:100%;
10-
overflow:hidden;
9+
z-index:1072;
10+
overflow-x:hidden;
11+
overflow-y:auto;
1112
}
1213
.lightWeightPopup .loading{
1314
text-align:center;
@@ -23,22 +24,41 @@
2324
overflow-x:hidden;
2425
overflow-y:auto;
2526
border-radius:5px;
26-
z-index:1030;
27+
position:relative;
28+
top:5%;
2729
}
2830
.lightWeightPopup #lightWeightPopupHead{
29-
text-align:right;
31+
display:grid;
32+
align-items:center;
33+
grid-template-columns: 1fr 50px;
34+
border-bottom: 1px solid #ddd;
35+
}
36+
37+
.lightWeightPopup #lightWeightPopupHead .title{
38+
font-weight: bold;
39+
padding:10px;
3040
}
31-
.lightWeightPopup #lightWeightPopupHead span{
41+
42+
.lightWeightPopup #lightWeightPopupHead .close{
3243
color: #fff;
3344
font-size: 25px;
34-
position: absolute;
35-
top: -2px;
36-
cursor:pointer;
45+
text-align:right;
46+
cursor: pointer;
47+
background: #000;
48+
padding:10px;
49+
}
50+
.lightWeightPopup #lightWeightPopupHead .close span{
51+
position: relative;
52+
left: -4px;
53+
top: -5px;
3754
}
3855
.lightWeightPopup #lightWeightPopupBody{
3956
padding:15px;
4057
min-height:100%;
4158
}
4259
.lightWeightPopup #lightWeightPopupClose{
4360
float:right;
61+
}
62+
.lightWeightPopup .clear{
63+
clear:both;
4464
}

‎index.php‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!doctype html>
32
<html lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:addthis="https://www.addthis.com/help/api-spec" prefix="og: http://ogp.me/ns#" class="no-js">
43
<head>
@@ -8,7 +7,7 @@
87
<link rel="shortcut icon" href="https://demo.learncodeweb.com/favicon.ico">
98
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
109
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
11-
<link rel="stylesheet" href="css/lightweightpopup.css" type="text/css">
10+
<link rel="stylesheet" href="css/lightweightpopup.css?<?php echo rand();?>" type="text/css">
1211
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
1312
<!--[if lt IE 9]>
1413
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -74,7 +73,36 @@ function gtag(){dataLayer.push(arguments);}
7473

7574
<div class="container">
7675
<h1><a href="https://learncodeweb.com/php/load-dynamic-data-on-page-scroll-with-php-and-ajax/">How to create a custom POPUP form with PHP & Ajax</a></h1>
77-
<div class="text-center mt-5"><button type="button" name="popup" id="popup" class="btn btn-primary" data-href="contact-us.php" data-content="ajax" data-width="50%" data-height="70%"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE</button></div>
76+
<div class="text-center mt-5">
77+
<button type="button" id="popup" class="btn btn-primary" data-href="contact-us.php" data-content="ajax"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE AJAX</button>
78+
<button type="button" id="inline" class="btn btn-danger" data-content="inline"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE INLINE</button>
79+
<a href="javascript:;" data-href="contact-us.php" class="btn btn-primary" data-content="ajax"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE AJAX</a>
80+
</div>
81+
82+
<div class="inline" style="display:none;">
83+
<form method="post">
84+
<div class="form-group">
85+
<label>First Name</label>
86+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
87+
</div>
88+
<div class="form-group">
89+
<label>Last Name</label>
90+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
91+
</div>
92+
<div class="form-group">
93+
<label>Email</label>
94+
<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
95+
</div>
96+
<div class="form-group">
97+
<label>Message</label>
98+
<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
99+
</div>
100+
<div class="form-group">
101+
<input type="button" name="button" value="Submit" class="btn btn-danger">
102+
</div>
103+
</form>
104+
</div>
105+
78106
</div>
79107

80108
<div class="container my-4">
@@ -94,10 +122,12 @@ function gtag(){dataLayer.push(arguments);}
94122
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
95123
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
96124
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
97-
<script src="js/lightWeightPopup.js"></script>
125+
<script src="js/lightWeightPopup.js?<?php echo rand();?>"></script>
98126
<script>
99127
$(document).ready(function(e) {
100-
$('#popup').lightWeightPopup({href:'contact-us.php',width:'320px',maxWidth:'90%'});
128+
$('#popup').lightWeightPopup({href:'contact-us.php', width:'90%',maxWidth:'600px' ,title:'Ajax Model'});
129+
$('#inline').lightWeightPopup({width:'95%',maxWidth:'320px' ,title:'Inline Model'});
130+
$('[data-content="ajax"]').lightWeightPopup({width:'95%',maxWidth:'320px' ,title:'Ajax Model'});
101131
});
102132
</script>
103133

‎js/lightWeightPopup.js‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,56 @@
66

77

88
(function($){
9-
$(document).on("click","#lightWeightPopupHead",function(){ $('.lightWeightPopup').remove(); });
9+
$(document).on("click",".close",function(){ $('.lightWeightPopup').remove(); $('body').removeAttr('style'); });
1010
$.fn.lightWeightPopup = function(options) {
1111

12-
$(this).on("click",function(){
13-
w = h = u = mw = mh = '';
12+
$(this).on("click",function(){
13+
$("body").find('.lightWeightPopup').remove();
14+
w = h = u = mw = mh = t = '';
15+
1416
var attrData = $(this).data();
15-
if(attrData.width!="" && !typeof attrData.width === "undefined"){ w = attrData.width;}
16-
if(attrData.height!="" && !typeof attrData.height === "undefined"){ h = attrData.height;}
17-
if(attrData.href!="" && !typeof attrData.href === "undefined"){u = attrData.href;}
18-
if(attrData.maxWidth!="" && !typeof attrData.maxWidth === "undefined"){mw = attrData.maxWidth;}
19-
if(attrData.maxHeight!="" && !typeof attrData.maxHeight === "undefined"){mh = attrData.maxHeight;}
17+
18+
if(attrData.width!="" && typeof attrData.width !== "undefined"){ w = attrData.width;}
19+
if(attrData.height!="" && typeof attrData.height !== "undefined"){ h = attrData.height;}
20+
if(attrData.href!="" && typeof attrData.href !== "undefined"){u = attrData.href;}
21+
if(attrData.maxWidth!="" && typeof attrData.maxWidth !== "undefined"){mw = attrData.maxWidth;}
22+
if(attrData.maxHeight!="" && typeof attrData.maxHeight !== "undefined"){mh = attrData.maxHeight;}
23+
if(attrData.title!="" && typeof attrData.title !== "undefined"){t = attrData.title;}else{t = 'Model';}
24+
25+
console.log(u);
26+
2027
var settings = $.extend({
2128
href : u, //Ajax url
2229
width : w, //Container width
2330
height : h, //Container height
24-
maxWidth : mw, //Container max width
25-
maxHeight : mh, //Container max height
31+
maxWidth : mw, //Container title
32+
maxHeight : mh, //Container close text/icon
33+
title : t, //Model Title
2634
},options);
27-
35+
2836
console.log(settings);
29-
30-
$("body").prepend('<div class="lightWeightPopup"><div id="lightWeightPopup" style="width:'+settings.width+'; height:'+settings.height+'; max-width:'+settings.maxWidth+'; max-height:'+settings.maxHeight+'"><div id="lightWeightPopupHead"><span>&otimes;</span></div><div id="lightWeightPopupBody"><div class="loading"><img src="image/loader.gif"><p class="text">Please Wait..!</p></div></div></div></div>');
37+
38+
$("body").append('<div class="lightWeightPopup"><div id="lightWeightPopup" tabindex="-1" role="dialog" style="width:'+settings.width+'; height:'+settings.height+'; max-width:'+settings.maxWidth+'; max-height:'+settings.maxHeight+'"><div id="lightWeightPopupHead"><div class="title">'+settings.title+'</div><div class="close"><span>&times;</span></div></div><div id="lightWeightPopupBody" role="document"><div class="loading"><img src="image/loader.gif"><p class="text">Please Wait..!</p></div></div></div></div>');
39+
$('body').css('overflow','hidden');
3140
if(attrData.content=='ajax'){
3241
$.ajax({
3342
method : "POST",
3443
url : settings.href,
3544
success : function(data){
3645
if(data!=""){
3746
setTimeout(function(){$('#lightWeightPopupBody').html(data);},1000);
38-
}else{
39-
alert('No data found!');
4047
}
4148
}
4249
});
4350
}
51+
52+
if(attrData.content=='inline'){
53+
var data = $('body').find('.inline').html();
54+
if(data!=""){
55+
setTimeout(function(){$('#lightWeightPopupBody').html(data);},1000);
56+
}
57+
}
4458
});
4559

4660
};
47-
}(jQuery));
61+
}(jQuery));

0 commit comments

Comments
 (0)