Skip to content

Commit bc03f59

Browse files
mianzaidmianzaid
authored
Add files via upload
1 parent 5b8690c commit bc03f59

4 files changed

Lines changed: 269 additions & 35 deletions

File tree

‎contact-us.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<form method="post">
2+
<div class="form-group">
3+
<label>First Name</label>
4+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
5+
</div>
6+
<div class="form-group">
7+
<label>Last Name</label>
8+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
9+
</div>
10+
<div class="form-group">
11+
<label>Email</label>
12+
<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
13+
</div>
14+
<div class="form-group">
15+
<label>Message</label>
16+
<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
17+
</div>
18+
<div class="form-group">
19+
<input type="button" name="button" value="Submit" class="btn btn-danger">
20+
</div>
21+
</form>

‎css/lightweightpopup.css‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.lightWeightPopup{
1+
.lwp{
22
background:rgba(0,0,0,0.9);
33
padding:5px;
44
margin:0px auto;
@@ -10,55 +10,70 @@
1010
overflow-x:hidden;
1111
overflow-y:auto;
1212
}
13-
.lightWeightPopup .loading{
13+
.lwp .loading{
1414
text-align:center;
1515
color:#FFF;
1616
}
17-
.lightWeightPopup .loading .text{
17+
.lwp .loading .text{
1818
color:#444;
1919
}
20-
.lightWeightPopup #lightWeightPopup{
20+
.lwp #lwp{
2121
margin:15px auto;
2222
background:#FFF;
2323
border:5px solid #000;
2424
overflow-x:hidden;
25-
overflow-y:auto;
25+
overflow-y:hidden;
2626
border-radius:5px;
2727
position:relative;
2828
top:5%;
29+
max-width:450px;
30+
}
31+
.lwp .lwpIframe{
32+
width: 100%;
33+
height: 100%;
34+
display: block;
35+
border: 0;
36+
padding: 0;
37+
margin: 0;
2938
}
30-
.lightWeightPopup #lightWeightPopupHead{
39+
.lwp #lwpHead{
3140
display:grid;
3241
align-items:center;
3342
grid-template-columns: 1fr 50px;
3443
border-bottom: 1px solid #ddd;
3544
}
3645

37-
.lightWeightPopup #lightWeightPopupHead .title{
46+
.lwp #lwpHead .title{
3847
font-weight: bold;
3948
padding:10px;
4049
}
4150

42-
.lightWeightPopup #lightWeightPopupHead .close{
51+
.lwp #lwpHead .close{
4352
color: #fff;
4453
font-size: 25px;
4554
text-align:right;
4655
cursor: pointer;
4756
background: #000;
4857
padding:10px;
4958
}
50-
.lightWeightPopup #lightWeightPopupHead .close span{
59+
.lwp #lwpHead .close span{
5160
position: relative;
5261
left: -4px;
5362
top: -5px;
5463
}
55-
.lightWeightPopup #lightWeightPopupBody{
64+
.lwp #lwpBody{
5665
padding:15px;
5766
min-height:100%;
5867
}
59-
.lightWeightPopup #lightWeightPopupClose{
68+
.lwp #lwpClose{
6069
float:right;
6170
}
62-
.lightWeightPopup .clear{
71+
.lwp .clear{
6372
clear:both;
73+
}
74+
.lwp-inline{
75+
display:none;
76+
}
77+
.lwp-hidden{
78+
overflow:hidden;
6479
}

‎index.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!doctype html>
2+
<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">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>How to create a custom POPUP form with PHP & Ajax</title>
7+
<link rel="shortcut icon" href="https://demo.learncodeweb.com/favicon.ico">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
10+
<link rel="stylesheet" href="css/lightweightpopup.css?<?php echo rand();?>" type="text/css">
11+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
12+
<!--[if lt IE 9]>
13+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
14+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
15+
<![endif]-->
16+
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
17+
<script>
18+
(adsbygoogle = window.adsbygoogle || []).push({
19+
google_ad_client: "ca-pub-6724419004010752",
20+
enable_page_level_ads: true
21+
});
22+
</script>
23+
<!-- Global site tag (gtag.js) - Google Analytics -->
24+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131906273-1"></script>
25+
<script>
26+
window.dataLayer = window.dataLayer || [];
27+
function gtag(){dataLayer.push(arguments);}
28+
gtag('js', new Date());
29+
gtag('config', 'UA-131906273-1');
30+
</script>
31+
</head>
32+
<body>
33+
<div class="bg-light border-bottom shadow-sm sticky-top">
34+
<div class="container">
35+
<header class="blog-header py-1">
36+
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand text-muted p-0 m-0" href="https://learncodeweb.com"><img src='https://learncodeweb.com/wp-content/uploads/2019/01/logo.png' alt='LearnCodeWeb'></a>
37+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
38+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
39+
<ul class="navbar-nav mr-auto">
40+
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="active nav-item"><a title="Home" href="https://learncodeweb.com/" class="nav-link">Home</a></li>
41+
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="nav-item"><a title="Web Development" href="https://learncodeweb.com/learn/web-development/" class="nav-link">Web Development</a></li>
42+
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-558" class="nav-item"><a title="PHP" href="https://learncodeweb.com/learn/php/" class="nav-link">PHP</a></li>
43+
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-14" class="nav-item"><a title="Bootstrap" href="https://learncodeweb.com/learn/bootstrap-framework/" class="nav-link">Bootstrap</a></li>
44+
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-559" class="nav-item"><a title="WordPress" href="https://learncodeweb.com/learn/wordpress/" class="nav-link">WordPress</a></li>
45+
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-15" class="nav-item"><a title="Snippets" href="https://learncodeweb.com/learn/snippets/" class="nav-link">Snippets</a></li>
46+
</ul>
47+
<form method="get" action="https://learncodeweb.com" class="form-inline my-2 my-lg-0">
48+
<div class="input-group input-group-md">
49+
<input type="text" class="form-control search-width" name="s" id="search" value="" placeholder="Search..." aria-label="Search">
50+
<div class="input-group-append">
51+
<button type="submit" class="btn btn-primary" id="searchBtn"><i class="fa fa-search"></i></button>
52+
</div>
53+
</div>
54+
</form>
55+
</div>
56+
</nav>
57+
</header>
58+
</div> <!--/.container-->
59+
</div>
60+
<div class="container my-4">
61+
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
62+
<!-- demo top banner -->
63+
<ins class="adsbygoogle"
64+
style="display:block"
65+
data-ad-client="ca-pub-6724419004010752"
66+
data-ad-slot="6737619771"
67+
data-ad-format="auto"
68+
data-full-width-responsive="true"></ins>
69+
<script>
70+
(adsbygoogle = window.adsbygoogle || []).push({});
71+
</script>
72+
</div>
73+
74+
<div class="container">
75+
<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>
76+
<div class="text-center mt-5">
77+
<button type="button" id="popup" class="btn btn-primary mb-3" data-href="contact-us.html" 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 mb-3" data-overlay="true" data-content="inline"><i class="fa fa-fw fa-file-alt"></i> CLICK HERE INLINE</button>
79+
<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>
80+
<a href="javascript:;" 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> Ancher Tag Iframe</a>
81+
</div>
82+
83+
84+
<div class="lwp-inline">
85+
<form method="post">
86+
<div class="form-group">
87+
<label>First Name</label>
88+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
89+
</div>
90+
<div class="form-group">
91+
<label>Last Name</label>
92+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
93+
</div>
94+
<div class="form-group">
95+
<label>Email</label>
96+
<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
97+
</div>
98+
<div class="form-group">
99+
<label>Message</label>
100+
<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
101+
</div>
102+
<div class="form-group">
103+
<label>First Name</label>
104+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
105+
</div>
106+
<div class="form-group">
107+
<label>Last Name</label>
108+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
109+
</div>
110+
<div class="form-group">
111+
<label>Email</label>
112+
<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
113+
</div>
114+
<div class="form-group">
115+
<label>Message</label>
116+
<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
117+
</div>
118+
<div class="form-group">
119+
<label>First Name</label>
120+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
121+
</div>
122+
<div class="form-group">
123+
<label>Last Name</label>
124+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
125+
</div>
126+
<div class="form-group">
127+
<label>Email</label>
128+
<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
129+
</div>
130+
<div class="form-group">
131+
<label>Message</label>
132+
<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
133+
</div>
134+
<div class="form-group">
135+
<label>First Name</label>
136+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your first name">
137+
</div>
138+
<div class="form-group">
139+
<label>Last Name</label>
140+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your last name">
141+
</div>
142+
<div class="form-group">
143+
<label>Email</label>
144+
<input type="email" name="name" id="name" class="form-control" placeholder="Enter your email">
145+
</div>
146+
<div class="form-group">
147+
<label>Message</label>
148+
<textarea rows="5" name="message" id="message" class="form-control" placeholder="Write your message here"></textarea>
149+
</div>
150+
<div class="form-group">
151+
<input type="button" name="button" value="Submit" class="btn btn-danger">
152+
</div>
153+
</form>
154+
</div>
155+
156+
</div>
157+
158+
<div class="container my-4">
159+
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
160+
<!-- demo left sidebar -->
161+
<ins class="adsbygoogle"
162+
style="display:block"
163+
data-ad-client="ca-pub-6724419004010752"
164+
data-ad-slot="7706376079"
165+
data-ad-format="auto"
166+
data-full-width-responsive="true"></ins>
167+
<script>
168+
(adsbygoogle = window.adsbygoogle || []).push({});
169+
</script>
170+
</div>
171+
172+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
173+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
174+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
175+
<script src="js/lightWeightPopup.js?<?php echo rand();?>"></script>
176+
<script>
177+
$(document).ready(function(e) {
178+
$('#popup').lightWeightPopup({href:'contact-us.html', width:'90%', maxWidth:'600px', title:'Ajax Model'});
179+
$('#inline').lightWeightPopup({title:'Inline Model'});
180+
$('#iframe').lightWeightPopup({href:'https://www.youtube.com/embed/foSaKHdXbss', maxWidth:'600px', height:'400px', title:'Iframe Model'});
181+
$('#ancher').lightWeightPopup({width:'95%', maxWidth:'320px', title:'Ajax Model'});
182+
});
183+
</script>
184+
185+
</body>
186+
</html>

‎js/lightWeightPopup.js‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,31 @@
44
** Version: 0.1
55
**/
66

7+
function closeDilog(action){
8+
if(action=="inline"){
9+
var inlineData = $('#lwpBody').html();
10+
setTimeout(function(){ $('body').find('.lwp-inline').html(inlineData);},100);
11+
}
12+
$('.lwp').remove();
13+
}
714

815
(function($){
9-
$(document).on("click",".close",function(){ $('.lightWeightPopup').remove(); $('body').removeAttr('style'); });
1016
$.fn.lightWeightPopup = function(options) {
17+
var dset = {};
1118

12-
$(this).on("click",function(){
13-
$("body").find('.lightWeightPopup').remove();
19+
$(this).on("click",function(){
20+
21+
$("body").find('.lwp').remove();
1422
w = h = u = mw = mh = t = '';
15-
16-
var attrData = $(this).data();
1723

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);
24+
var dset = $(this).data();
25+
26+
if(dset.width!="" && typeof dset.width !== "undefined"){ w = dset.width;}
27+
if(dset.height!="" && typeof dset.height !== "undefined"){ h = dset.height;}
28+
if(dset.href!="" && typeof dset.href !== "undefined"){u = dset.href;}
29+
if(dset.maxWidth!="" && typeof dset.maxWidth !== "undefined"){mw = dset.maxWidth;}
30+
if(dset.maxHeight!="" && typeof dset.maxHeight !== "undefined"){mh = dset.maxHeight;}
31+
if(dset.title!="" && typeof dset.title !== "undefined"){t = dset.title;}else{t = 'Model';}
2632

2733
var settings = $.extend({
2834
href : u, //Ajax url
@@ -33,29 +39,35 @@
3339
title : t, //Model Title
3440
},options);
3541

36-
console.log(settings);
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');
40-
if(attrData.content=='ajax'){
42+
$("body").append('<div class="lwp"><div id="lwp" tabindex="-1" role="dialog" style="width:'+settings.width+'; height:'+settings.height+'; max-width:'+settings.maxWidth+'; max-height:'+settings.maxHeight+'"><div id="lwpHead"><div class="title">'+settings.title+'</div><div class="close" onclick="closeDilog(\''+dset.content+'\')"><span>&times;</span></div></div><div id="lwpBody" role="document"><div class="loading"><img src="image/loader.gif"><p class="text">Please Wait..!</p></div></div></div></div>');
43+
44+
$('body').addClass('lwp-hidden');
45+
if(dset.content=='ajax'){
4146
$.ajax({
4247
method : "POST",
4348
url : settings.href,
4449
success : function(data){
4550
if(data!=""){
46-
setTimeout(function(){$('#lightWeightPopupBody').html(data);},1000);
51+
setTimeout(function(){$('#lwpBody').html(data);},1000);
4752
}
4853
}
4954
});
5055
}
5156

52-
if(attrData.content=='inline'){
53-
var data = $('body').find('.inline').html();
57+
if(dset.content=='iframe'){
58+
nH = $('#lwpBody').height()-50;
59+
setTimeout(function(){ $('#lwpBody').html('<iframe frameborder="0" style="height:'+nH+'px;" allowfullscreen class="lwpIframe" src="'+settings.href+'"></iframe>');},1000);
60+
}
61+
62+
if(dset.content=='inline'){
63+
var data = $('body').find('.lwp-inline').html();
5464
if(data!=""){
55-
setTimeout(function(){$('#lightWeightPopupBody').html(data);},1000);
65+
setTimeout(function(){$('#lwpBody').html(data);},1000);
5666
}
67+
$('body').find('.lwp-inline').html('');
5768
}
69+
5870
});
59-
71+
6072
};
6173
}(jQuery));

0 commit comments

Comments
 (0)