时间戳

首页 > 解决方案 > 单击“X”时似乎无法关闭模式

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

问题描述

似乎无法让我的模式在 X 上关闭。第一个模式关闭，但其他模式没有。下面是代码片段。不是全部。如果需要，我可以发布全部内容。

我有 window.onclick 功能，所以如果我在任何模式之外单击它会关闭，但 X 似乎只在我显示的第一个模式上工作。有任何想法吗？

<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";
    }

标签： javascript

解决方案

转储我的完整代码。看起来它在这里也不起作用。所以我有点不对劲。如果我只插入 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>

推荐阅读