WTL Assignment 12
WTL Assignment 12
Roll no:2223337
Assignment No.12
Aim:
Display a popup on mouse over of the link and add two text boxes and button to that popup.
Theory:
Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and
easier web development. It uses HTML, CSS and Javascript.
Easy to get started: With just the knowledge of HTML and CSS anyone can get started with
Bootstrap. Also the Bootstrap official site has good documentation.
Responsive design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
More about responsive design in the chapter Bootstrap Responsive Design. Provides a clean
and uniform solution for building an interface for developers. It contains beautiful and
functional built-in components which are easy to customize. It also provides web-based
customization. And best of all it is open source.
What Bootstrap Package Includes?
Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background.
CSS: Bootstrap comes with features of global CSS settings, fundamental HTML elements
styled and enhanced with extensible classes, and an advanced grid system.
JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily
include them all, or one by one.
Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins
to get your very own version.
line of JavaScript:
$('#identifier').modal(options)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup on Hover</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
a{
text-decoration: none;
font-size: 18px;
color: #3498db;
cursor: pointer;
}
#popup {
display: none;
position: absolute;
top: 60px;
left: 100px;
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 8px;
width: 250px;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#popup input {
width: 100%;
padding: 8px;
margin: 5px 0;
border-radius: 5px;
border: 1px solid #ccc;
}
#popup button {
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#popup button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div id="popup">
<input type="text" placeholder="Enter your name">
<input type="text" placeholder="Enter your email">
<button id="submitBtn">Submit</button>
</div>
<script>
$(document).ready(function(){
$("#hoverLink").hover(function(){
$("#popup").fadeIn();
}, function(){
$("#popup").fadeOut();
});
$("#submitBtn").click(function(){
var name = $("#popup input").eq(0).val();
var email = $("#popup input").eq(1).val();
alert("Name: " + name + "\nEmail: " + email);
});
});
</script>
</body>
</html>
Output:
Conclusion:
To create a popup on mouse-over, set up a hidden div with two text boxes and a button. Use CSS
to style and position it, then toggle its visibility on link hover using CSS :hover or JavaScript.
This enhances interactivity by displaying input options without leaving the page.