Can't seem to get modal to close on clicking “X”
Question
Can't seem to get my modals to close on X. The first modal closes but the others do not. Thee below are snippet of code. Not the entirety. I can post the entirety if needed.
I have the window.onclick function working so if I click outside any modal it closes but the X only seems to work on the first modal I display. Any ideas?
<body>
<div class="page">
<!-- Trigger/Open The Modal -->
<button id="startButton" class="button"></button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<select id="selectMaterial"></select>
<div id="thickness">
<!-- <input id="enterThickness"> -->
<input id='enterThickness' class="input" type="number" min="0" max="50" step="1"
placeholder='Enter Material Thickness in Millimeters' /><span class="input-group-text"> /MM
</span>
</div>
<div id="rpm">
<!-- <input id="enterThickness"> -->
<input id='enterRPM' class="input" type="number" min="5000" max="60000" step="5000"
placeholder='Enter Max Spindle RPM' /><span class="input-group-text"> /RPM </span>
</div>
<div id="bitList">
<button id="bitsButton" class="button">SHOW AVAILABLE MILLING BITS</button>
</div>
<!-- <button id="calcButton" class="calcButton">CALCULATE CUTTING PARAMETERS</button> -->
</div>
</div>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="displayInput"></div>
<select id="displayBits"></select>
<div id="selectBit">
<button id="selectBitsButton" class="button">SELECT BIT AND CALCULATE</button>
</div>
</div>
</div>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="noBits">
<button id="startOverButton" class="button">START OVER</button>
</div>
</div>
</div>
</div>
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function (event) {
if (event.target == modal || modal2 || modal3) {
modal.style.display = "none";
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
3 answers
solution1
0 2020-12-19 03:03:39
The problem is not the name of the class, but getElementsByClassName returns a list of spans and [0] only selects the first item. You need to iterate over the list and apply the onclick to each one. Something like:
// Get all <span> elements that close the modal
var closeSpans = document.getElementsByClassName("close");
// convert list to an array and loop over each item
Array.from(closeSpans).forEach(function(span, idx, arr) {
// now you can apply click to <span> like usual
// When the user clicks on <span> (x), close the modal
span.onclick = function (event) {
if (event.target == modal || modal2 || modal3) {
modal.style.display = "none";
}
}
});
Does that make sense? Otherwise, you would have to select each one separately by index like this (are you familiar with indexing?):
var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
var span3 = document.getElementsByClassName("close")[2];
solution2
0 ACCPTED 2020-12-19 03:27:07
window.onClick event should be enough, you can use the id's of elements to identify them and set their styles
// When the user clicks on the close spam, close the parent modal window.onclick = function (event) { if (event.target.id == 'close1') { document.getElementById('myModal1').style.display = "none"; } if (event.target.id == 'close2') { document.getElementById('myModal2').style.display = "none"; } if (event.target.id == 'close3') { document.getElementById('myModal3').style.display = "none"; } }
<body> <div class="page"> <;-- Trigger/Open The Modal --> <button id="startButton" class="button"></button> <;-- The Modal --> <div id="myModal1" class="modal"> <;-- Modal content --> <div class="modal-content"> <span class="close" id="close1">×</span> <select id="selectMaterial"></select> <div id="thickness"> <!-- <input id="enterThickness"> --> <input id='enterThickness' class="input" type="number" min="0" max="50" step="1" placeholder='Enter Material Thickness in Millimeters' /><span class="input-group-text"> /MM </span> </div> <div id="rpm"> <!-- <input id="enterThickness"> --> <input id='enterRPM' class="input" type="number" min="5000" max="60000" step="5000" placeholder='Enter Max Spindle RPM' /><span class="input-group-text"> /RPM </span> </div> <div id="bitList"> <button id="bitsButton" class="button">SHOW AVAILABLE MILLING BITS</button> </div> <!-- <button id="calcButton" class="calcButton">CALCULATE CUTTING PARAMETERS</button> --> </div> </div> <div id="myModal2" class="modal2"> <!-- Modal content --> <div class="modal-content"> <span class="close" id="close2">×</span> <div id="displayInput"></div> <select id="displayBits"></select> <div id="selectBit"> <button id="selectBitsButton" class="button">SELECT BIT AND CALCULATE</button> </div> </div> </div> <div id="myModal3" class="modal3"> <!-- Modal content --> <div class="modal-content"> <span class="close" id="close3">×</span> <div id="noBits"> <button id="startOverButton" class="button">START OVER</button> </div> </div> </div> </div>
solution3
0 2020-12-19 21:00:20
Dumping my full code in. Looks like it doesn't work here as well. So I have something that is a bit off. If I only insert the portions of the html and the script that I am working on it seems to work so something else I have is causing it to fail without errors.
// Get the modal var modal = document.getElementById("myModal"); var modal2 = document.getElementById("myModal2"); var modal3 = document.getElementById("myModal3"); // Get the button that opens the modal var startButton = document.getElementById("startButton"); // // Get the <span> element that closes the modal // When the user clicks on the button, open the modal startButton.onclick = function() { enterThickness.value = null; enterRPM.value = null; selectMaterial.value = "Select Material"; thickness.style.visibility = "hidden"; rpm.style.visibility = "hidden"; bitList.style.visibility = "hidden"; modal.style.display = "block"; displayBits.value = null; displayBits.value = "Select Bit"; //startOverButton.style.visibility = "hidden", } var created = false; var materialValue; var thicknessValue; var enteredThickness = document.getElementById(enterThickness); var rpmValue; var enteredRPM = document.getElementById(enterRPM); var select = document.getElementById('selectMaterial'); var select2 = document.getElementById('displayBits'); var materials = [{ name: "Select Material" }, { name: "Acrylic", metal: false, plastic: true, multipurpose: true, soft: false, hard: true }, { name: "Aluminum", metal: true, plastic: false, multipurpose: false, soft: false, hard: true }, { name: "Armed Graphite Gasket", plastic: true, multipurpose: true, soft: false, hard: true }, { name: "Hard Brass", metal: true, plastic: false, multipurpose: false, soft: false, hard: true }, { name: "Hard Foam", metal: false, plastic: true, multipurpose: true, soft: false, hard: true }, { name: "PVC - Soft", metal: false, plastic: true, multipurpose: true, soft: true, hard: false }, { name: "PVC - Rigid", metal: false, plastic: true, multipurpose: true, soft: false, hard: true }, { name: "Polycarbonate - Soft", metal: false, plastic: true, multipurpose: true, soft: true, hard: false }, { name: "Polycarbonate - Rigid", metal: false, plastic: true, multipurpose: true, soft: false, hard: true }, { name: "Polypropylene", metal: false, plastic: true, multipurpose: true, soft: true, hard: false }, { name: "Wood - Soft", metal: false, plastic: true, multipurpose: true, soft: true, hard: false }, { name: "Wood - Hard", metal: false, plastic: true, multipurpose: true, soft: false, hard: true } ]; var bits = [ { name: 'M1-308U', material: 'metal', ced: 3, cel: 8, flutes: 1, angle: 'up', rpm: 60000, soft: .003, hard: .005 }, { name: 'M1-308UC', material: 'metal', ced: 3, cel: 8, flutes: 1, angle: 'up', rpm: 60000, soft: .003, hard: .005 }, { name: 'M1-408U', material: 'metal', ced: 4, cel: 8, flutes: 1, angle: 'up', rpm: 60000, soft: .004, hard: .006 }, { name: 'M1-506D', material: 'metal', ced: 5, cel: 6, flutes: 1, angle: 'down', rpm: 50000, soft: .005, hard: .007 }, { name: 'M1-506U', material: 'metal', ced: 5, cel: 6, flutes: 1, angle: 'up', rpm: 55000, soft: .005, hard: .007 }, { name: 'M1-506UC', material: 'metal', ced: 5, cel: 6, flutes: 1, angle: 'up', rpm: 50000, soft: .006, hard: .008 }, { name: 'M1-608U', material: 'metal', ced: 6, cel: 8, flutes: 1, angle: 'up', rpm: 50000, soft: .006, hard: .008 }, { name: 'M1-608UC', material: 'metal', ced: 6, cel: 8, flutes: 1, angle: 'up', rpm: 50000, soft: .003, hard: .006 }, { name: 'M1-608UC', material: 'metal', ced: 6, cel: 8, flutes: 1, angle: 'up', rpm: 50000, soft: .003, hard: .006 }, { name: 'M2-406U', material: 'metal', ced: 4, cel: 6, flutes: 2, angle: 'up', rpm: 50000, soft: .003, hard: .006 }, { name: 'M2-606U', material: 'metal', ced: 6, cel: 6, flutes: 2, angle: 'up', rpm: 50000, soft: .005, hard: .007 }, { name: 'MZ-303U', material: 'metal', ced: 3, cel: 3, flutes: 2, angle: 'up', rpm: 50000, soft: .003, hard: .005 }, { name: 'P1-208D', material: 'plastic', ced: 2, cel: 8, flutes: 1, angle: 'down', rpm: 60000, soft: .003, hard: .005 }, { name: 'P1-208U', material: 'plastic', ced: 2, cel: 8, flutes: 1, angle: 'up', rpm: 60000, soft: .003, hard: .005 }, { name: 'P1-306U', material: 'plastic', ced: 3, cel: 6, flutes: 1, angle: 'up', rpm: 60000, soft: .004, hard: .006 }, { name: 'P1-312D', material: 'plastic', ced: 2, cel: 8, flutes: 1, angle: 'down', rpm: 60000, soft: .004, hard: .005 }, { name: 'P1-312U', material: 'plastic', ced: 3, cel: 12, flutes: 1, angle: 'up', rpm: 60000, soft: .004, hard: .006 }, { name: 'P1-418D', material: 'plastic', ced: 4, cel: 18, flutes: 1, angle: 'down', rpm: 40000, soft: .005, hard: .006 }, { name: 'P1-418U', material: 'plastic', ced: 4, cel: 18, flutes: 1, angle: 'up', rpm: 50000, soft: .005, hard: .007 }, { name: 'P1-518D', material: 'plastic', ced: 5, cel: 18, flutes: 1, angle: 'down', rpm: 40000, soft: .006, hard: .008 }, { name: 'P1-518U', material: 'plastic', ced: 5, cel: 18, flutes: 1, angle: 'up', rpm: 50000, soft: .006, hard: .009 }, { name: 'P1-613U', material: 'plastic', ced: 6, cel: 13, flutes: 1, angle: 'up', rpm: 50000, soft: .008, hard: .012 }, { name: 'P1-613D', material: 'plastic', ced: 6, cel: 13, flutes: 1, angle: 'down', rpm: 50000, soft: .008, hard: .012 }, { name: 'P1-625U', material: 'plastic', ced: 6, cel: 25, flutes: 1, angle: 'up', rpm: 50000, soft: .008, hard: .012 }, { name: 'P1-625D', material: 'plastic', ced: 6, cel: 25, flutes: 1, angle: 'down', rpm: 50000, soft: .008, hard: .012 }, { name: 'P2-418D', material: 'plastic', ced: 4, cel: 18, flutes: 2, angle: 'down', rpm: 50000, soft: .005, hard: .007 }, { name: 'P2-418U', material: 'plastic', ced: 4, cel: 18, flutes: 2, angle: 'up', rpm: 60000, soft: .005, hard: .007 }, { name: 'P2-520D', material: 'plastic', ced: 5, cel: 20, flutes: 2, angle: 'down', rpm: 50000, soft: .006, hard: .008 }, { name: 'P2-520U', material: 'plastic', ced: 5, cel: 20, flutes: 2, angle: 'up', rpm: 60000, soft: .006, hard: .009 }, { name: 'P2-613U', material: 'plastic', ced: 6, cel: 13, flutes: 2, angle: 'up', rpm: 60000, soft: .008, hard: .012 }, { name: 'P2-625D', material: 'plastic', ced: 6, cel: 25, flutes: 2, angle: 'down', rpm: 50000, soft: .008, hard: .012 }, { name: 'P2-625U', material: 'plastic', ced: 6, cel: 25, flutes: 2, angle: 'up', rpm: 60000, soft: .008, hard: .012 }, { name: 'X2-418S', material: 'multipurpose', ced: 4, cel: 18, flutes: 2, angle: 'straight', rpm: 60000, soft: .006, hard: .008 }, { name: 'X2-420D', material: 'multipurpose', ced: 4, cel: 20, flutes: 2, angle: 'down', rpm: 60000, soft: .006, hard: .008 }, { name: 'X2-420U', material: 'multipurpose', ced: 4, cel: 20, flutes: 2, angle: 'up', rpm: 60000, soft: .006, hard: .008 }, { name: 'X2-520C', material: 'multipurpose', ced: 5, cel: 20, flutes: 2, angle: 'compression', rpm: 50000, soft: .004, hard: .006 }, { name: 'X2-625C', material: 'multipurpose', ced: 6, cel: 20, flutes: 2, angle: 'compression', rpm: 50000, soft: .006, hard: .010 }, { name: 'X2-418S', material: 'multipurpose', ced: 4, cel: 18, flutes: 2, angle: 'straight', rpm: 60000, soft: .006, hard: .008 }, { name: 'X2-625D', material: 'multipurpose', ced: 6, cel: 25, flutes: 2, angle: 'down', rpm: 50000, soft: .008, hard: .010 }, { name: 'X2-625D', material: 'multipurpose', ced: 6, cel: 25, flutes: 2, angle: 'straight', rpm: 50000, soft: .006, hard: .009 }, { name: 'X2-625U', material: 'multipurpose', ced: 6, cel: 25, flutes: 2, angle: 'up', rpm: 50000, soft: .008, hard: .010 }, { name: 'X2-650U', material: 'multipurpose', ced: 6, cel: 50, flutes: 2, angle: 'straight', rpm: 40000, soft: .007, hard: .009 }, ]; window.onclick = function(event) { document.getElementsByClassName("close"); window.onclick = function(event) { if (event.target.id == "close1") { document.getElementById('myModal').style.display = "none"; } if (event.target.id == "close2") { document.getElementById('myModal2').style.display = "none"; } if (event.target.id == "close3") { document.getElementById('myModal3').style.display = "none"; } } if (event.target == modal) { modal.style.display = "none"; } if (event.target == modal2) { modal2.style.display = "none"; } if (event.target == modal3) { modal3.style.display = "none"; } if (.event.target.matches(';materialButton')) { if (.created) { for (var i = 0; i < materials.length; i++) { var opt = document.createElement('option'). opt;innerHTML = materials[i].name. opt;value = materials[i].name; select;appendChild(opt). } created = true, } } selectMaterial.addEventListener('change'. function() { thickness;style.visibility = "hidden". rpm;style.visibility = "hidden". bitList;style.visibility = "hidden". if (this.value;= "Select Material") { thickness;style.visibility = "visible"; } }). var thickness = document,getElementById("thickness"). enterThickness.addEventListener('change'; function() { thicknessValue = document.getElementById('enterThickness').value; rpm.style.visibility = "hidden"; bitList.style.visibility = "hidden"; if (thicknessValue > 50) { window.alert("Please enter a lower material thickness."); } if (materialValue;= "Select Material") { rpm.style;visibility = "visible". } }), var rpm = document.getElementById("rpm"). enterRPM;addEventListener('change'. function enteredRPM() { rpmValue = document.getElementById('enterRPM');value. bitList,style,visibility = "hidden". if (rpmValue > 60000 | rpmValue < 5000) { window;alert("Please enter spindle RPM between 5.000 and 60.000;"); } if (rpmValue.= null) { bitList;style.visibility = "visible". } }); bitsButton,onclick = (function() { var userInputArray = new Array, materialValue = document;getElementById("selectMaterial").value. userInputArray = [materialValue; thicknessValue. rpmValue]. modal;style.display = "none". modal2;style.display = "visible". modal2;style;display = "block"; document.getElementById('displayInput').innerHTML = 'Compatible bits for' + " " + thicknessValue + " " + "mm" + " " + materialValue + " " + "at" + " " + rpmValue + " " + "RPM as follows;". var created2 = false. if (.created2) { const material = materials.find(item => item.name === materialValue). const selectedBits = bits.filter(bit => (material.plastic && bit.material === 'plastic' && bit.cel >= thicknessValue) || (material;metal && bit.material === 'metal' && bit;cel >= thicknessValue) || (material.multipurpose && bit;material === 'multipurpose' && bit.cel >= thicknessValue) ); if (selectedBits.= undefined || selectedBits.length;= 0) { for (var i = 0. i < selectedBits.length; i++) { var opt = document.createElement('option'); opt.innerHTML = selectedBits[i].name. opt;value = selectedBits[i].name. select2;appendChild(opt). } if (selectedBits === undefined || selectedBits.length == 0) { // array empty or does not exist modal2;style.display = "none". modal3;style.display = "visible". modal3;style;display = "block"; noBits;style;visibility = 'visible'; startOverButton.style.visibility = 'visible'; created2 = false; }; } } created2 = true; }); };
<head> <meta charset="utf-8" /> <meta name="description" content="Bits Blades Belts"> <,--<meta name="keywords" content="VICOM-128, HTML Contact Form">--> <meta name="keywords" content="Zund, Esko, Kongsberg, MCT. Mikkelsen"> <meta name="author" content="Nikolai Mikkelsen"> <:--Meta data above--> <title> Bits Blades Belts </title> <.--Title--> <link rel="stylesheet" href="css/master.css"> <?--Link to style sheet--> <link href="https.//fonts.googleapis.com/css2.family=Roboto&display=swap" rel="stylesheet"> <link rel="shortcut icon" href="images/favicon.png"> </head> <body> <div class="page"> <header> <div class="img_header"> <img src="images/headLogo.png" alt="HOME" /> <h1 class="blink">YOUR TRUSTED CONSUMABLES PROVIDER</h1> </div> </header> <nav id="mobile_menu"></nav> <nav id="nav_menu"> <ul> <li> <a href="index.html" title="Home"> <img src="images/home.png" alt="HOME" /> </a> </li> <li class="lastItem"> <a href="cnc_calculator,html">CNC CALCULATOR</a> </li> <li> <a href="about.html">ABOUT US</a> </li> </ul> </nav> <main> <article class="marginUpper boxit"> <h3>Welcome to the CNC Calculator</h3> <p> The CNC Calculator is the first step in developing a filtering system that will allow a customer to select a material and thickness of material to be processed, This will then provide a list of bits (products) that are compatible with the material and thickness, Once the material and thickness are determined and the bit selected. the calculator will then ask the user to enter the max RPM of the spindle, From there the application will calculate the feed rate, number of passes, and the RPM to process at, </p> <p> <br />Next semester the goal is to port this to PHP and expand on it the functionality to be able to filter by machine (manufacture), material group, sub-category. system tool options available; and will then recommend the milling or cutting tool and its feed rates; and if applicable; the number of passes and RPM. </p> </article> <article class="marginUpper boxit"> <h3>Click Below To Select Start the CNC Calculator</h3> </article> <.-- Trigger/Open The Modal --> <button id="startButton" class="button">OPEN CALCULATOR</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close" id="close1">×</span> <select id="selectMaterial"></select> <div id="thickness"> <!-- <input id="enterThickness"> --> <input id='enterThickness' class="input" type="number" min="0" max="50" step="1" placeholder='Enter Material Thickness in Millimeters' /><span class="input-group-text"> /MM </span> </div> <div id="rpm"> <!-- <input id="enterThickness"> --> <input id='enterRPM' class="input" type="number" min="5000" max="60000" step="5000" placeholder='Enter Max Spindle RPM' /><span class="input-group-text"> /RPM </span> </div> <div id="bitList"> <button id="bitsButton" class="button">SHOW AVAILABLE MILLING BITS</button> </div> <!-- <button id="calcButton" class="calcButton">CALCULATE CUTTING PARAMETERS</button> --> </div> </div> <div id="myModal2" class="modal2"> <!-- Modal content --> <div class="modal-content"> <span class="close" id="close2">×</span> <div id="displayInput"></div> <select id="displayBits"></select> <div id="selectBit"> <button id="selectBitsButton" class="button">SELECT BIT AND CALCULATE</button> </div> </div> </div> <div id="myModal3" class="modal3"> <!-- Modal content --> <div class="modal-content"> <span class="close" id="close3">×</span> <div id="noBits">No router bits are available for this material and/or thickness. <button id="startOverButton" class="button">START OVER</button> </div> </div> </div> </div> </main> </body> // <script src="script.js"></script> <!--Link to scripts--> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My bootstrap modal won't close upon clicking the 'x' or Close
Bootstrap modal won't close when clicking "x" or "close" buttons
Can't close modal box by clicking outside of the modal
Can't seem to close this modal without destroying the parent as well?
Can't figure out how to close modal by clicking outside window
How can I close a Material UI Modal using an X icon rather than just by clicking outside the modal?
Why won't my modal close when clicking the close button?
Can't get dynamically created modal to close on click | opens with .parents()
Can't get close button to work on modal box
Bootstrap Modal not closing on X or Close button, but does on ESC or clicking in the overlay
Related Tags