Modal

Developer
James Donovan
Size
2,981 Kb
Views
12,144
  1. Modal Previews
  2. Modal HTML Codes
  3. Modal CSS Codes
  4. Modal JS Codes

How do I make an modal?

What is a modal? How do you make a modal? This script and codes were developed by James Donovan on 26 November 2022, Saturday.

Modal Previews
IQ Test

Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="modal"><i class="ion-android-close" onclick="closeModal()" id="close-modal"></i> <h2>Settings</h2> <h3>Global</h3> <p>Background Color: </p> <p>Background Image:</p> <input type="text"/> <h3>Search Engine</h3> <p>Engine</p> <select> <option value="google">Google</option> <option value="bing">Bing</option> <option value="yahoo">Yahoo</option> <option value="aol">AOL</option> <option value="ask">Ask</option> <option value="duckduckgo">DuckDuckGo</option> <option value="baidu">Baidu</option> </select> <p>Font</p> <select> <option value="open-sans">Open Sans</option> <option value="roboto">Roboto</option> <option value="lato">Lato</option> <option value="slabo">Slabo</option> <option value="oswald">Oswald</option> <option value="montserrat">Montserrat</option> <option value="lora">Lora</option> <option value="raleway">Raleway</option> <option value="droid-sans">Droid Sans</option> <option value="ubuntu">Ubuntu</option> </select> <p>Font Color:</p> <p>Background Color:</p> <p>Outline Color:</p>
</section> <script src="js/index.js"></script>
</body>
</html>

Modal - Script Codes CSS Codes

body { margin: 0; background: white;
}
#modal { background: pink; width: 80%; max-width: 800px; height: 80%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; overflow: scroll;
}
#close-modal { color: #000000; position: fixed; right: -17px; top: -24px; font-size: 24px; transition: scale .2s ease-in-out;
}
#close-modal:hover { transform: scale(1.4);
}

Modal - Script Codes JS Codes

function closeModal() {	var x = document.getElementById("close-modal");	document.getElementById("modal").style.display = "none";
}
Modal - Script Codes
Modal - Script Codes
Home Page Home
Developer James Donovan
Username JWDonovan
Uploaded November 26, 2022
Rating 3
Size 2,981 Kb
Views 12,144
Do you need developer help for 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!

James Donovan (JWDonovan) Script Codes
Name
Game Template
Blog
404
South Park Hub - Random Episodes
Push Menu
Slideshow
South Park Hub - Temp Slideshow
Portfolio Header
South Park Hub - Seasons
Video.js
Create amazing art & images 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!