Simple Responsive Popup
How do I make an simple responsive popup?
The popup looks jacked on codepen on small display, but renders fine on the real deal. Enjoy. . What is a simple responsive popup? How do you make a simple responsive popup? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.
Simple Responsive Popup - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Responsive Popup</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<i class="icon-plus-sign"></i>
<div class="pop"><i class="icon-remove-sign"></i> So simple so clean.
</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>
Simple Responsive Popup - Script Codes CSS Codes
body { font-size: 2rem; text-align: center; margin-top: 20px;
}
.icon-plus-sign { color: green; cursor: pointer;
}
i { font-size: 3rem;
}
.pop { display: none; position: absolute; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; background: grey; color: white; text-align: center;
}
.pop i { position: absolute; right: 4px; top: 2px; font-size: 2rem; cursor: pointer;
}
.pop i:hover { color: black;
}
@media only screen and (min-width: 481px) { i { font-size: 2rem; } .pop { left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
}
Simple Responsive Popup - Script Codes JS Codes
$(".icon-plus-sign").click( function() { $(".pop").fadeIn('slow'); } );
$(".pop i").click( function() { $(".pop").fadeOut('fast'); } );
//Thanks for Iphone titlebar fix http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/
var getIphoneWindowHeight = function() { // Get zoom level of mobile Safari // Such zoom detection might not work correctly on other platforms // var zoomLevel = document.documentElement.clientWidth / window.innerWidth; // window.innerHeight returns height of the visible area. // We multiply it by zoom and get our real height. return window.innerHeight * zoomLevel;
};
Developer | Revolution Graphics |
Username | rgfx |
Uploaded | October 01, 2022 |
Rating | 3 |
Size | 2,906 Kb |
Views | 30,360 |
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!
Name | Size |
Fancy Select Box | 5,516 Kb |
Fullsized Background Image slideshow | 1,914 Kb |
Check Mark troggle | 3,750 Kb |
Scroll animate | 2,428 Kb |
SVG as a submit button | 2,128 Kb |
Background image mouse scroll | 2,287 Kb |
SVG Background Repeat - Works IN IE | 2,957 Kb |
CSS Background | 2,293 Kb |
Toggle css on scroll position | 1,718 Kb |
Animating TImescale Gsap tweenmax | 2,149 Kb |
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!
Name | Username | Size |
Price Comparison Table | Orrinward | 3,459 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Shopping cart | Andiio | 6,581 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!