Popup Footer

Developer
Mark Thomes
Size
3,488 Kb
Views
52,624
  1. Popup Footer Previews
  2. Popup Footer HTML Codes
  3. Popup Footer CSS Codes
  4. Popup Footer JS Codes

How do I make an popup footer?

Simple popup footer proof of concept for a group website redesign project.. What is a popup footer? How do you make a popup footer? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Popup Footer Previews
IQ Test

Popup Footer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Popup Footer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Viga', sans-serif; overflow: hidden;
}
.popupfooter { position: absolute; bottom: -200px; color: white; background: black; height: 200px; padding: 20px; transition: all 0.5s ease;
}
.popupfooter.active { bottom: 0;
}
.popupfooter.active .toggle:before, .popupfooter.active .toggle:after { transition: all 0.5s ease;
}
.popupfooter.active .toggle:before { transform: translateX(0) rotateZ(45deg);
}
.popupfooter.active .toggle:after { transform: translateX(0) rotateZ(-45deg);
}
.popupfooter .toggle { position: absolute; width: 40px; height: 40px; right: 20px; top: -40px; background: black;
}
.popupfooter .toggle:before, .popupfooter .toggle:after { content: ''; position: absolute; background: white; display: block; width: 24px; height: 4px; top: 18px; left: 8px; transition: all 0.5s ease;
}
.popupfooter .toggle:before { transform: translateY(-5px) rotateZ(0);
}
.popupfooter .toggle:after { transform: translateY(5px) rotateZ(0);
}
.popupfooter .left, .popupfooter .middle, .popupfooter .right { float: left; width: 25%; padding-right: 20px;
}
.popupfooter .middle { width: 50%;
}
.popupfooter .right { padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="http://fonts.googleapis.com/css?family=Viga" rel="stylesheet" type="text/css"/>
<div class="popupfooter"> <div class="toggle"></div> <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem harum molestiae et consequatur perferendis quas eligendi adipisci dicta hic eius saepe aliquam sequi consequuntur cum ipsa beatae dolor deserunt.</div> <div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nulla voluptatum facere voluptatem similique quas molestiae alias ab libero labore tenetur optio harum sint fuga deleniti. Possimus iure facilis a modi molestiae totam amet autem voluptates consectetur quis excepturi iusto fuga pariatur nesciunt veritatis itaque incidunt odit deleniti tenetur.</div> <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem harum molestiae et consequatur perferendis quas eligendi adipisci dicta hic eius saepe aliquam sequi consequuntur cum ipsa beatae dolor deserunt.</div>
</div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Popup Footer - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Viga', sans-serif; overflow: hidden;
}
.popupfooter { position: absolute; bottom: -200px; color: white; background: black; height: 200px; padding: 20px; transition: all 0.5s ease;
}
.popupfooter.active { bottom: 0;
}
.popupfooter.active .toggle:before, .popupfooter.active .toggle:after { transition: all 0.5s ease;
}
.popupfooter.active .toggle:before { transform: translateX(0) rotateZ(45deg);
}
.popupfooter.active .toggle:after { transform: translateX(0) rotateZ(-45deg);
}
.popupfooter .toggle { position: absolute; width: 40px; height: 40px; right: 20px; top: -40px; background: black;
}
.popupfooter .toggle:before, .popupfooter .toggle:after { content: ''; position: absolute; background: white; display: block; width: 24px; height: 4px; top: 18px; left: 8px; transition: all 0.5s ease;
}
.popupfooter .toggle:before { transform: translateY(-5px) rotateZ(0);
}
.popupfooter .toggle:after { transform: translateY(5px) rotateZ(0);
}
.popupfooter .left, .popupfooter .middle, .popupfooter .right { float: left; width: 25%; padding-right: 20px;
}
.popupfooter .middle { width: 50%;
}
.popupfooter .right { padding: 0;
}

Popup Footer - Script Codes JS Codes

function changebox() { $(".popupfooter").toggleClass("active");
}
$(".toggle").on("click", changebox);
Popup Footer - Script Codes
Popup Footer - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 3
Size 3,488 Kb
Views 52,624
Do you need developer help for Popup Footer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Thomes (WithAnEs) Script Codes
Name
CSS Birthday Cake
CSS Books
Sidebar Nav
Basic Menu CSS
SVG Search...
Pharmacy Loader
Up Arrow
Twitter Feed Loading Animation
Running Character
Social Icons
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!