Showing a pop-up div on a button click is a very simple task. Below is the code for showing and closing(hiding) a div and use it like a popup using jquery.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<link rel='stylesheet' href='css/newjs_task.css' type='text/css' />
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/newjs_task.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<div class="left_foot">
<p class="para">Carrier</p>
<img class="wifi" src="images/wifi.png" height="20px" width="20px" alt="logo" style="margin:left"/>
</div>
<div class="a">
</div>
</header>
<main>
<section class="contact_1">
<p><b>CONTACTS</b></p>
</section>
<div id="formName">
<div class="overlay-content popup1">
<button id="close-btn">Click me</button>
</div>
</div>
<div id="contactdiv">
<form class="form" action="#" id="contact">
<h1>test user</h1>
<hr/><br/>
<input type="button" id="send" value="Send Text"/><br/>
<br/>
<input type="button" id="delete" value="Delete Contact"/><br/>
<br/>
<input type="button" id="cancel" value="Cancel"/>
<br/>
</form>
</div>
</main>
</div>
</body>
</html>
In the above code I have included jquery files and wrote a simple HTML in which on clicking the button Click me,a div gets displayed like popup. You can have any content inside this div. On clicking the cancel button a function is called that hides the complete div.
Below is the code for the js file that I have included.
$(document).ready(function() {
$("#close-btn").click(function() {
$("#contactdiv").css("display", "block");
});
$("#contact #cancel").click(function() {
$(this).parent().parent().hide();
});
});
I hope this small piece of code snippet will help you.
0 Comment(s)