Modal Popup

Developer
Mohomed Anees
Size
2,923 Kb
Views
26,312
  1. Modal Popup Previews
  2. Modal Popup HTML Codes
  3. Modal Popup CSS Codes
  4. Modal Popup JS Codes

How do I make an modal popup?

This modal popup shows on window load function. And it is responsive.. What is a modal popup? How do you make a modal popup? This script and codes were developed by Mohomed Anees on 27 August 2022, Saturday.

Modal Popup Previews
IQ Test

Modal Popup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal Popup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="popup1" class="modal-box"> <header> <a href="#" class="js-modal-close close">×</a> </header> <div class="modal-body"> <div class="bg-image"></div> <div class="content-wrapper"> <h1>Donate to Equality Now</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare mollis. </p> <button type="submit" class="btn">Donate</button> </div> </div>
</div>
<div class='modal-overlay'></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 - Script Codes CSS Codes

html { font-family: "roboto", helvetica; position: relative; line-height: 1.5; color: #FFF;
}
/* ------------------------------- Font Styles
---------------------------------- */
h1,
h2 { font-weight: normal; line-height: normal;
}
h1 { font-size: 2.5em; font-weight: 600; margin-top: 0; margin-bottom: 0.25em;
}
/* ------------------------------- Modal
---------------------------------- */
.modal-box { position: absolute; z-index: 1000; width: 98%; background: white; border: 10px solid #FFF; border-radius: 0px; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box;
}
/* ------------------------------- Modal Body
---------------------------------- */
.modal-box .modal-body { padding: 3em 2.5em; background: url('http://www.desktopwallpaperhd.net/wallpapers/4/1/wallpapers-buildings-izteglimi-pages-44881.jpg') center center no-repeat; background-size: cover;
}
/* ------------------------------- Overlay Background
---------------------------------- */
.modal-overlay { opacity: 0; filter: alpha(opacity=0); position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85) !important;
}
/* ------------------------------- Contents
---------------------------------- */
.modal-box .modal-body .content-wrapper { position: relative; width: 75%;
}
/* ------------------------------- Close Button
---------------------------------- */
.btn { font-size: 1.5em; cursor: pointer; text-transform: uppercase; padding: 0.75em 1.5em; margin-top: 0.75em; background-color: orange; border: none; color: #FFF; text-decoration: none; display: inline; border-radius: 4px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;
}
.btn:hover { background-color: #FFF; color: orange;
}
a.close { line-height: 1; font-size: 2em; position: absolute; top: 3%; right: 2%; text-decoration: none; color: #FFF; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease;
}
a.close:hover { color: rgba(255, 255, 255, 0.5);
}
.v-center { height: 100vh; width: 100%; display: table; position: relative; text-align: center;
}
.v-center > div { display: table-cell; vertical-align: middle; position: relative; top: -10%;
}
@media (min-width: 32em) { .modal-box { width: 50%; }
}

Modal Popup - Script Codes JS Codes

$(function() { $(window).load(function() { $(".modal-overlay").fadeTo(500, 0.7); var modalBox = $(this).attr('data-modal-id'); $('#' + modalBox).fadeIn($(this).data()); }); $(".js-modal-close").click(function() { $(".modal-box, .modal-overlay").fadeOut(500, function() { $(".modal-overlay").remove(); }); }); $(window).resize(function() { $(".modal-box").css({ top: ($(window).height() - $(".modal-box").outerHeight()) / 2, left: ($(window).width() - $(".modal-box").outerWidth()) / 2 }); }); $(window).resize();
});
Modal Popup - Script Codes
Modal Popup - Script Codes
Home Page Home
Developer Mohomed Anees
Username mohomedanees
Uploaded August 27, 2022
Rating 3
Size 2,923 Kb
Views 26,312
Do you need developer help for Modal Popup?

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!

Mohomed Anees (mohomedanees) Script Codes
Name
Relative Aspect Ratio
Button Effects
Anchor tag href attribute value change
Button Fix 1
Button Effect Final
Transparent CSS Triangle with Borders
Custom input file
Image Caption on Hover
Image Caption
Responsive image height
Create amazing love letters 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!