CSS-Centered Modal Window

Developer
Retrofuturistic
Size
2,618 Kb
Views
4,048
  1. CSS-Centered Modal Window Previews
  2. CSS-Centered Modal Window HTML Codes
  3. CSS-Centered Modal Window CSS Codes

How do I make an css-centered modal window?

This code-pen shows a centered modal window using only css. The centering remains as the window is resized. The modal window can have any dimension. For this pen, it has a min-height and specified width but you can also the height and width without affecting the centering. The close button is also centered and anchored to the bottom of the modal window.. What is a css-centered modal window? How do you make a css-centered modal window? This script and codes were developed by Retrofuturistic on 19 January 2023, Thursday.

CSS-Centered Modal Window Previews
IQ Test

CSS-Centered Modal Window - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Centered Modal Window </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="modalWrapper">	<div class="modal">	<div class="bg_gradient"></div>	<div class="errors">	<h4>Error Message</h4>	<ul class="tightList">	<li>Credit Card Expired</li>	<li>Incorrect CVV</li>	</ul>	<div class="bigBtn"><a href="#">Close</a></div>	</div>	</div>
</div>
<div class="site"> <div class="bg_gradient"></div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</body>
</html>

CSS-Centered Modal Window - Script Codes CSS Codes

body { padding:0; margin:0; background: #fff; /* Old browsers */
}
.modalWrapper {	position: fixed; text-align: center; background: rgba(0,0,0, 0.3); top:0; left: 0; right: 0; bottom: 0; z-index: 2;
}
.modalWrapper:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ /* For visualization background: #808080; width: 5px; */ }
.modal {	position: relative; display: inline-block; vertical-align: middle; width: 300px; padding: 15px 15px 0px; border: #000000 solid 1px; background: #ffffff;	-webkit-box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.7);	box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.7); }
.modal .gradient_bg{	height: 100px }
.errors {	position: relative;	min-height: 150px;
}
.errors h4 {	font-family:'Source Sans Pro', sans-serif;	margin-bottom: 20px;
}
.errors .tightList {	text-align: left;	margin-bottom: 20px;
}
.errors .bigBtn {	position: absolute;	display: block;	background: none;	bottom: 0;	width: 100%;	padding: 0;
}
.errors .bigBtn a{	display: inline-block;	background-image: none;	background-color: rgb(129,23,27);	padding: 5px 30px;	color: #ffffff;	font-size: 15px;	line-height: 1.5; text-decoration:none;	-webkit-box-shadow: 0px 5px 15px -1px rgba(70, 70, 70, 0.6);	box-shadow: 0px 5px 15px -1px rgba(70, 70, 70, 0.6);
}
.site { padding:0; margin:0; margin-top:-17px; position:relative;
}
.bg_gradient { position:absolute; top:0; left:0; width:100%;	background: #fff -webkit-linear-gradient(top, rgb(212,205,182) 0%,rgb(255,255,255) 100%); /* W3C */ height:100px;
}
.content { position:relative; padding:30px;
}
CSS-Centered Modal Window - Script Codes
CSS-Centered Modal Window - Script Codes
Home Page Home
Developer Retrofuturistic
Username retrofuturistic
Uploaded January 19, 2023
Rating 3
Size 2,618 Kb
Views 4,048
Do you need developer help for CSS-Centered Modal Window?

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!

Retrofuturistic (retrofuturistic) Script Codes
Name
Country List with Pagination
Responsive Skew
Expandable Left Side Bar with jQuery animate
Responsive Horizontally Centered Cards
Slide Toggle Menu
Responsive Cards Layout
A Pen by retrofuturistic
Box Shadow Effects
Nonresponsive Cards
Responsive Skewed Text with Images
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!