Simple Modal

Developer
Kira
Size
3,847 Kb
Views
40,480
  1. Simple Modal Previews
  2. Simple Modal HTML Codes
  3. Simple Modal CSS Codes
  4. Simple Modal JS Codes

How do I make an simple modal?

What is a simple modal? How do you make a simple modal? This script and codes were developed by Kira on 25 August 2022, Thursday.

Simple Modal Previews
IQ Test

Simple Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Modal</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra volutpat sem, porta venenatis purus hendrerit id. Integer sit amet massa sed urna semper molestie. Sed at enim consectetur, rhoncus ligula eget, lobortis ante. Fusce auctor est nec ante malesuada, vitae pulvinar purus ullamcorper. Nulla facilisi. Donec at enim egestas, finibus dui sit amet, aliquet velit. Aliquam at libero in libero dictum ullamcorper at vel enim.
Pellentesque sem augue, pharetra a diam sit amet, maximus dictum ante. Proin quis ex tellus. Quisque viverra, nisl et fermentum cursus, diam purus placerat ipsum, vel tempus arcu risus vitae libero. Quisque eget nibh non nunc consequat suscipit. Vestibulum eros nulla, tristique eget dapibus non, laoreet sed risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a ante facilisis, sagittis nisi in, tincidunt leo. Cras vel sapien id odio fringilla pellentesque. Ut gravida lectus sed arcu rutrum tempus. Nunc non quam et metus placerat tincidunt ut vitae neque. Donec mollis, purus ac placerat scelerisque, sapien ex iaculis eros, sed volutpat leo odio sit amet dolor.
In at congue arcu. Fusce a nisl erat. Mauris eu suscipit orci. In ac maximus massa. Cras vitae rhoncus tortor. Nunc eu justo elit. Sed nibh orci, porttitor ac elit sit amet, molestie tempor lectus. Sed ultrices, eros et scelerisque fringilla, leo quam condimentum leo, non ultrices lorem nulla et mi. Curabitur id efficitur quam. In sodales tincidunt nunc, sed volutpat lacus ornare id. Maecenas maximus faucibus mattis.
Vivamus at odio consectetur, feugiat ante quis, feugiat lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum rhoncus velit et odio suscipit vehicula. In a nibh nec eros dictum maximus sed et est. Maecenas vitae accumsan lectus, semper congue est. Nulla vitae vestibulum magna. Sed nec augue nec ex accumsan suscipit eget vel est. Sed malesuada mauris imperdiet erat tincidunt rutrum.
Sed a iaculis ex. Sed placerat nulla eu sem aliquam convallis. Donec id orci a risus tincidunt aliquam. Pellentesque eu fringilla odio. Phasellus purus nisl, vehicula nec eros et, lobortis tempor ipsum. Suspendisse eget ligula aliquam, varius nulla non, facilisis lacus. Pellentesque cursus nunc sed vestibulum consequat. Proin porttitor leo aliquam ligula finibus, quis interdum neque iaculis. Vestibulum pretium, magna id imperdiet viverra, nisl sem blandit ante, non efficitur mauris elit vitae tellus. Phasellus ornare ultrices lacus non feugiat.
<div class="modal-trigger btn">Click to Launch Modal</div>
<div class="overlay"> <div class="close">X</div> <div class="content"> <h1>This is a title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Modal - Script Codes CSS Codes

body { font-family: 'Montserrat', sans-serif; height: 5000px;
}
body.modal-open { overflow: hidden;
}
.btn { color: #fff; background: #81CFC2; text-decoration: none; padding: 20px; margin: 20px 20px 0; display: inline-block; cursor: pointer;
}
.overlay { position: fixed; background: rgba(0, 0, 0, 0.8); height: 100%; width: 100%; top: 0; left: 0; display: none; pointer-events: auto;
}
.overlay .close { color: white; position: absolute; top: 20px; left: 20px; cursor: pointer;
}
.overlay .content { position: fixed; top: 50%; left: 50%; padding: 60px; background: white; max-width: 70%; transform: translateX(-50%) translateY(-50%);
}

Simple Modal - Script Codes JS Codes

// Show Modal & Disable Page Scroll
$('.modal-trigger').click(function() { $('.overlay').fadeIn(); $('body').addClass('modal-open');
});
// Hide Modal & Enable Page Scroll
$('.close').click(function() { $('.overlay').fadeOut(); $('body').removeClass('modal-open');
});
Simple Modal - Script Codes
Simple Modal - Script Codes
Home Page Home
Developer Kira
Username kepixels
Uploaded August 25, 2022
Rating 3
Size 3,847 Kb
Views 40,480
Do you need developer help for Simple Modal?

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!

Kira (kepixels) Script Codes
Name
Blog Images Sized and Centered
Control Shape Hero
Sticky CTA Buttons
Dashed Lines
Fluid Grid
Mode Menu
A Pen by Kira
Rotated Text
Parallax Scroll Demo
Icon Loading Animation
Create amazing marketing copy 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!