HTML Modal Windows
How do I make an html modal windows?
Using CSS driven overlays and modal windows and passing data from one part of the HTML to an HTML form.. What is a html modal windows? How do you make a html modal windows? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.
HTML Modal Windows - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML Modal Windows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="wrapper"> <section data-role="page"> <h2>This is the title</h2> <p>This is some content</p> <ul data-role="listview"> <li data-ref="1">List Item 1</li> <li data-ref="2">List Item 2</li> <li data-ref="3">List Item 3</li> <li data-ref="4">List Item 4</li> <li data-ref="5">List Item 5</li> <li data-ref="6">List Item 6</li> </ul> </section> <div data-role="overlay"> </div> <div data-role="modal"> <h3>Modal Window Title</h3> <form> <div class="formBox"> <select name="list" id="list" class="lg"> <option value="1">First Value</option> <option value="2">Second Value</option> <option value="3" >Third Value</option> <option value="4" >Fourth Value</option> <option value="5">Fifth Value</option> <option value="6">Sixth Value</option> </select> </div> <div class="formBox"> <input type="text" id="txt" name="txt" class="lg" placeholder="Enter a value here please"/> </div> <div class="formBox"> <input type="button" id="btnCancel" value="Cancel" class="btn"/> <input type="button" id="btnSave" value="Save" class="btn"/> </div> </form> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
HTML Modal Windows - Script Codes CSS Codes
/************************************* Defaults
*************************************/
*{ padding:0; margin:0; box-sizing:border-box; font-family:'Open Sans', sans-serif;
}
h2{ font-size:1.6rem; padding:1rem 0;
}
p{ font-size:1.0rem; padding:1rem 0;
}
.wrapper{ width:100%; height:100%;
}
/************************************* Layout
*************************************/
[data-role=page]{ position:absolute; z-index:5; top:0; left:0; width:100%; min-height:100%; color:#eee; background-color:#333; padding:1rem;
}
[data-role=overlay]{ position:fixed; top:0; left:0; z-index:10; height:100%; width:100%; background-color: rgba(0,0,0,0.82);
}
[data-role=modal]{ position:fixed; top:20%; left:10%; width: 80%; z-index:15; max-height:80%; padding:5vh; border:1px solid #333; min-height:10%; color:#fff; background-color:#666; box-shadow:1px 1px 2px rgb(0,0,0);
}
/************************************* Forms
*************************************/
.formBox{ padding: 0.6rem 0;
}
input, select{ line-height: 1.6rem; font-size: 1.2rem; padding:0 1rem; max-width:90%;
}
.narrow{ width:2rem;
}
.btn{ width:auto;
}
.med{ width:10rem;
}
.lg{ width:25rem;
}
.xlg{ width:40rem;
}
/************************************* Pages
*************************************/
[data-role=listview]{ list-style:none;
}
[data-role=listview] li{ font-size:1.2rem; line-height:3rem; height:3rem; border:1px solid #000; background-color:#ccc; color:#333; font-weight:300; padding:0 1rem; cursor:pointer;
}
/************************************* Modals
*************************************/
HTML Modal Windows - Script Codes JS Codes
var app = { init: function(){ document.querySelector("[data-role=listview]").addEventListener("click", app.edit); document.getElementById("btnCancel").addEventListener("click", app.cancel); document.getElementById("btnSave").addEventListener("click", app.save); }, cancel: function(ev){ document.querySelector("[data-role=modal]").style.display="none"; document.querySelector("[data-role=overlay]").style.display="none"; }, save: function(ev){ document.querySelector("[data-role=modal]").style.display="none"; document.querySelector("[data-role=overlay]").style.display="none"; }, edit: function(ev){ ev.stopPropagation(); document.querySelector("[data-role=modal]").style.display="block"; document.querySelector("[data-role=overlay]").style.display="block"; var item = ev.target.getAttribute("data-ref"); var itemVal = ev.target.innerHTML; document.getElementById("list").value = item; /************** Or the really long labourious difficult confusing annoying wasting time way.... for(var i=0; i< document.querySelectorAll("#list option").length; i++){ if(document.querySelectorAll("#list option")[i].value == item){ document.querySelectorAll("#list option")[i].setAttribute("selected", "selected"); }else{ document.querySelectorAll("#list option")[i].removeAttribute("selected"); } } ****************/ document.querySelector("[data-role=modal] h3").innerHTML = "Editing " + itemVal; }
}
document.addEventListener("DOMContentLoaded", app.init);
Developer | Mobile Application Design-Development |
Username | mad-d |
Uploaded | August 10, 2022 |
Rating | 3 |
Size | 2,995 Kb |
Views | 26,312 |
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!
Name | Size |
Sept 29, 2017 complete | 2,972 Kb |
MAD9022 Refactoring Practice | 2,315 Kb |
Mad9013 - DOM Manipulation sample | 3,113 Kb |
Mad9014 - objects and arrays | 2,606 Kb |
Mad9013 - Layout and Picture Element | 2,377 Kb |
MAD9013-F2015-Midterm | 4,641 Kb |
Closure Failure | 1,933 Kb |
HTML5 Canvas Intro | 1,870 Kb |
Mobile Web App Starter | 2,014 Kb |
MAD9014 Exercise 3 Starters | 3,533 Kb |
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!
Name | Username | Size |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Flip test | Madhes | 1,635 Kb |
Project_one | MOHIM | 9,592 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!