堆栈内存溢出
  简体   繁体   English

单击“X”时似乎无法关闭模式

[英]Can't seem to get modal to close on clicking “X”

 原文  2020-12-19 02:47:13  5   3    javascript

问题描述

Can't seem to get my modals to close on X. The first modal closes but the others do not.似乎无法让我的模式在 X 上关闭。第一个模式关闭，但其他模式没有。 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.我有 window.onclick function 工作，所以如果我在任何模态之外单击它会关闭，但 X 似乎只在我显示的第一个模态上工作。 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">&times;</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">&times;</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">&times;</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 个解决方案

解决方案1
 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.问题不在于 class 的名称，而是getElementsByClassName返回跨度列表并且[0]仅选择第一项。 You need to iterate over the list and apply the onclick to each one.您需要遍历列表并将 onclick 应用于每个列表。 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?):否则，您将不得不通过像这样的索引分别对 select 每一个（您熟悉索引吗？）：

var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
var span3 = document.getElementsByClassName("close")[2];

解决方案2
 0 已采纳  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 window.onClick 事件应该足够了，您可以使用元素的 id 来识别它们并设置它们的 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">&times;</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">&times;</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">&times;</span> <div id="noBits"> <button id="startOverButton" class="button">START OVER</button> </div> </div> </div> </div>

解决方案3
 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.如果我只插入 html 的部分并且我正在处理的脚本似乎可以工作，那么我拥有的其他东西会导致它失败而没有错误。 

 // 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">&times;</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">&times;</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">&times;</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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击“ x”或“关闭”后，我的引导程序模式不会关闭 - My bootstrap modal won't close upon clicking the 'x' or Close 单击“x”或“关闭”按钮时引导模式不会关闭 - 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? 无法通过在 window 外部单击来弄清楚如何关闭模态 - Can't figure out how to close modal by clicking outside window 如何使用 X 图标而不是仅通过在模态外单击来关闭 Material UI 模态？ - 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? 无法动态创建模态以单击时关闭| 以.parents（）打开 - 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不会在X或“关闭”按钮上关闭，但会在ESC上或单击叠加层时关闭 - Bootstrap Modal not closing on X or Close button, but does on ESC or clicking in the overlay
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM