Modal Popup Window

Developer
Kevin Haag
Size
2,433 Kb
Views
10,120
  1. Modal Popup Window Previews
  2. Modal Popup Window HTML Codes
  3. Modal Popup Window CSS Codes
  4. Modal Popup Window JS Codes

How do I make an modal popup window?

This modal popup transitions into focus with smooth animation and blurs the background behind it under a colored overlay.. What is a modal popup window? How do you make a modal popup window? This script and codes were developed by Kevin Haag on 29 November 2022, Tuesday.

Modal Popup Window Previews
IQ Test

Modal Popup Window - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal Popup Window</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-wrapper"> <a class="btn trigger" href="javascript:;">Click Me!</a>
</div>
<div class="modal-wrapper"> <div class="modal"> <div class="head"> <a class="btn-close trigger" href="javascript:;"></a> </div> <div class="content"> </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>

Modal Popup Window - Script Codes CSS Codes

html, body{ width:100%; height:100%; margin:0;
}
.page-wrapper{ width:100%; height:100%; background:url(https://i.imgur.com/2ZgHKbQ.jpg) center no-repeat; background-size:cover;
}
.blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}
a.btn{ width:150px; display:block; margin:-25px 0 0 -75px; padding:1em 0; position:absolute; top:50%; left:50%; font:1.125em 'Arial', sans-serif; font-weight:700; text-align:center; text-decoration:none; color:#fff; border-radius:5px; background:rgba(217,67,86,1);
}
.modal-wrapper{ width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(255,257,153,0.75); visibility:hidden; opacity:0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.modal-wrapper.open{ opacity:1; visibility:visible;
}
.modal{ width:600px; height:400px; display:block; margin:50% 0 0 -300px; position:relative; top:50%; left:50%; background:#fff; opacity:0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal{ margin-top:-200px; opacity:1;
}
.head{ width:90%; height:32px; padding:1.5em 5%; overflow:hidden; background:#01bce5;
}
.btn-close{ width:32px; height:32px; display:block; float:right;
}
.btn-close::before, .btn-close::after{ content:''; width:32px; height:6px; display:block; background:#fff;
}
.btn-close::before{ margin-top:12px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
}
.btn-close::after{ margin-top:-6px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);
}
.content{ padding:5%;
}

Modal Popup Window - Script Codes JS Codes

$( document ).ready(function() { $('.trigger').click(function() { $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur'); return false; });
});
Modal Popup Window - Script Codes
Modal Popup Window - Script Codes
Home Page Home
Developer Kevin Haag
Username khaag
Uploaded November 29, 2022
Rating 4.5
Size 2,433 Kb
Views 10,120
Do you need developer help for Modal Popup 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!

Kevin Haag (khaag) Script Codes
Name
A Pen by Kevin Haag
Hostwise Nav Bar
Animated Search Icon
Vertical Centering
Hamburger Icon Toggle
Youtube Layout
Scroll Icon
SVG Fuel Gauge
Create amazing blog posts 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!