Overlay css modal

Developer
Thivanspk
Size
2,154 Kb
Views
28,336
  1. Overlay css modal Previews
  2. Overlay css modal HTML Codes
  3. Overlay css modal CSS Codes
  4. Overlay css modal JS Codes

How do I make an overlay css modal?

What is a overlay css modal? How do you make a overlay css modal? This script and codes were developed by Thivanspk on 03 November 2022, Thursday.

Overlay css modal Previews
IQ Test

Overlay css modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Overlay css modal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="generic-list"> <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, distinctio!</li> <li class="item">Voluptatibus nemo optio quia! Recusandae id, consequuntur officiis modi nisi?</li> <li class="item">Atque fugit ipsa nam rerum ab consectetur veritatis minima similique.</li> <li class="item">Dignissimos quibusdam eligendi id debitis eos, consectetur, ducimus necessitatibus vero.</li>
</ul>
<button onclick="showModal()">Show modal</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Overlay css modal - Script Codes CSS Codes

.modal_bur { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; background: rgba(0, 0, 0, 0.8);
}
.modal_content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-family: "KanjiChart"; border: thin solid #339966; border-radius: 5px; background-color: #fffeee; text-align: center; padding-left: 10%; padding-right: 10%;
}

Overlay css modal - Script Codes JS Codes

function showModal(){ var overflowx = $('body').css('overflow-x'); var overflowy = $('body').css('overflow-y'); var modal = $('<div class="modal_bur"><div class="modal_content">Modal content </div> </div>'); modal.click(function(){ $('body').css('overflow-y', overflowx); $('body').css('overflow-x', overflowy); modal.remove(); }); $('body').css('overflow-y', 'hidden'); $('body').css('overflow-x', 'hidden'); $('body').append(modal);
}
Overlay css modal - Script Codes
Overlay css modal - Script Codes
Home Page Home
Developer Thivanspk
Username tronghiant
Uploaded November 03, 2022
Rating 3
Size 2,154 Kb
Views 28,336
Do you need developer help for Overlay css 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!

Thivanspk (tronghiant) Script Codes
Name
Temp
SVG path animate
Notes
A Pen by thivanspk
Async functions in es6 by using Promises and Generators
Get all vocab form mina.mazii.net
Border glowing
CSS clip-path animate
Kanji Card flip
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!