Pop-up window
Pop-up window is a child window inside the parent window that blocks interaction with parent window.There are also some options in a pop-up window to react with.Now a days websites use this feature a lot.This window is mainly used for collection of review of a website or for a feedback.Some websites use Pop-up box as a login window.Making a pop-up box is very easy using jQuery.
jQuery
jQuery is a cross platform,free,open source JavaScript library.It is used as a client side programming language with html.jQuery is supported by most of the browsers.The main purpose of using jQuery is to obtain a dynamic website.jQuery is used for animation,DOM,events,ajax etc.
Here's the code for making a simple jQuery feedback form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>popup</title>
</head>
<body style="background-image: url('aa.jpg');background-image: cover;">
<!--review button-->
<input type="button" id="reviews" value="reviews" name="" style="margin-left: 35%;margin-right: 20%;margin-top: 2%;margin-bottom: 2%;height: 50px;background-color: #884FF3;text-align: center;width: 10%;border-radius: 5%;
position: fixed;">
<!--feedback button-->
<input type="button" id="feedback" value="feedback" name="" style="margin-left: 55%;margin-right: 20%;margin-top: 2%;margin-bottom: 2%;height: 50px;background-color: #884FF3;text-align: center;width: 10%;border-radius: 5%;
position: relative;">
<!--welcome message -->
<div class="pop" style="z-index: 4;margin-left: 20%;margin-right: 20%;margin-top: 10%;margin-bottom: 2%;height: 30%;background-color: #768b8e;text-align: center;border-radius: 5%"><br/><h1> WELCOME </h1><br></div>
<!--review -->
<div id="pop1" z-index="1" style="margin-left: 20%;margin-right: 20%;margin-top: 5%;margin-bottom: 2%;height: 30%; background-color: #40858e;text-align: center; position: fixed; display: none; width: 60%;border-radius: 5%"><h2> REVIEWS </h2>
<h3 >      Name : <input type="TextBox" style="opacity: 0.5;width: 25%;" id="txtNamef" name="txt" placeholder=" you can't edit this field" value="" disabled="disabled"></h3>
<h3>Feedback : <input type="TextBox" style="opacity: 0.5;width: 25%;" id="txtf" name="txt" placeholder=" you can't edit this field " value="" disabled="disabled"></h3>
<input type="button" class="close" value="close" width="1000px">
</div>
<!--feedback-->
<div class="pop-feed" style="background-color: #995892:; position:fixed;display: none; ">
<div id="pop2" z-index="1"; style="margin-left: 20%;margin-right: 20%;margin-top: 5%;margin-bottom: 2%;height: 40%;background-color: #40858e;text-align: center;width: 60%;border-radius: 5%;
position: fixed;">
<h2>    FEEDBACK</h2>
<h3>       Name :     <input style="opacity: 0.5;width: 25%;" type="TextBox" id="txtName" class="txt" name="txt" placeholder="enter your name " value=""></h3>
<h3>Feedback :    <textarea style="opacity: 0.5;width: 25%;" id="txt" class="txt" name="txtFeedback" value="" placeholder="enter your opinion"></textarea> </h3>
<br>
<input type="submit" " value="FEEDBACK" disabled="disabled" style="height: 15%;background-color: #884FF3;text-align: center;width: 15%;border-radius: 5%;
">       
<input type="button" class="close" value="CLOSE" style="height: 15%;background-color: #884FF3;text-align: center;width: 10%;border-radius: 5%;">
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js">
</script>
</body>
</html>
$(document).ready(function(){
$('.pop').delay('2000').fadeOut('5000');
$('.close').click(function(){
$('#pop1').hide('slow');
$('#pop2').hide('slow');
});
$('.txt').change(function(){
$(':submit').removeAttr('disabled');
});
$(':submit').click(function(){
$('.txt').attr('value','nilanjana');
alert('feedback submitted successfuly');
var txtName = $('#txtName').val();
var txt = $('#txt').val();
alert(' NAME :'+txtName+' FEEDBACK :'+txt);
$('#txtNamef').attr('value',txtName);
$('#txtf').attr('value',txt);
$('.pop-outer').fadeOut('slow');
$('#pop1').fadeIn('slow');
$('#pop1').delay('3000').fadeOut('slow');
});
$('.close').click(function(){
$('.pop-outer').fadeOut('slow');
});
$('#reviews').click(function(){
$('.pop-outer').hide();
$('#pop1').fadeIn('slow');
$('#pop1').fadeIn('fast').toggle();
});
$('#feedback').click(function(){
$('#pop1').hide();
$('#pop2').fadeIn('slow');
$('.pop-outer').fadeIn('slow');
$('.pop-outer').fadeIn('fast').toggle();
});
});
Explanation of jQuery
Basic syntax of jQuery :$(selector).action();
$ sign: define/access jQuery. A (selector) to find (query).
delay() is a method used to delay some task to perform.
click(function(){code}):click is an event handler which performs some tasks defined in function({code}) .
show()is a method used to show a particular element .It can take the 'slow','fast','milliseconds'values
hide() is a method used to hide a particular element.It can take the 'slow','fast','milliseconds'values
change() is a event handler used to know about any change of an element,(it is only valid for textbox, select,input,textarea).
removeAttr('attribute')method is used to remove the attributefrom an element.
attr('value','changed value')is used to change a specific attribute's valueto changed value.
val()method is used to return the value of value attribute.
fadeIn() method gradually changes the opacity of the selected element from hidden to visible.
fadeout()is a method used to vanish some element by fading that out;it gradually changes the opacity of the selected element from visible to hidden .
alert('message')is used to display an alert box with specified message.
Explore the code here : Pop-up form using jQuery
on codepen
Top comments (0)