Несколько всплывающих окон windows по Javascript / Html - PullRequest
Новая
       7

Несколько всплывающих окон windows по Javascript / Html

0 голосов
/ 10 февраля 2020

У меня проблема с несколькими всплывающими окнами windows. Я сделал несколько элементов SVG. Когда я нажимаю на элемент, появляется всплывающее окно. Когда я хочу закрыть, я нажимаю «X» и всплывающее окно исчезает. Позже я скопирую этот код, потому что я хотел бы создать 5-6 всплывающих окон windows, а не только этот. Но я не могу с этим справиться. Текст из второго окна находится в первом окне, а второе всплывающее окно появляется / исчезает только тогда, когда первое окно открыто. Я новичок в Javascript, потому что я пытаюсь настроить веб-сервер для визуализации производственной отрасли в сфере автоматизации. Ниже я прилагаю скриншоты.

1) Только одно окно Одно окно работает. Когда я нажимаю на вертикальный клапан, появляется всплывающее окно

2) Оба windows Когда я нажимаю на горизонтальный клапан, всплывающее окно не появляется. Когда я нажимаю первое окно, появляется два окна, как на экране. Текст из второго окна также находится в первом окне, а второе окно в плохом положении. Теперь, когда я закрываю пустое второе всплывающее окно и нажимаю на горизонтальный клапан (первое всплывающее окно все еще открыто), появляется пустое всплывающее окно.

3) Только второе окно Когда я удаляю код из первого окно, второе всплывающее окно работает.

Я хотел бы иметь windows как на первом и третьем экране. 

<div class = "absoluteEight">
   <div id="popup">
      <button id ="b1" onclick="document.getElementById('popup').style.display='none' " style="float: right;">X</button>        
   <table>
      <tr>
         <center>Zacier->Kociol</center>
         <form method="post" action="">
            <td><input id="open_zacier_closeDown" type="submit" value='ON' /></td>
            <input type="hidden" name='ZacierValveOutOpen' value="1"/>
         </form>
         <form method="post" action="">
            <td><input id="open_zacier_openDown" type="submit" value='OFF' /></td>
            <input type="hidden" name='ZacierValveOutClose' value="1"/>
         </form>
      </tr>
   </table>
</div>

<div class = "absoluteNine">
   <div id="popup_2">
      <button id ="b2" onclick="document.getElementById('popup_2').style.display='none' " style="float: right;">X</button>      
   <table>
      <tr>
         <center>Zacier</center>
         <form method="post" action="">
            <td><input id="open_zacier_closeUp" type="submit" value='ON' /></td>
            <input type="hidden" name='ZacierValveInOpen' value="1"/>
         </form>
         <form method="post" action="">
            <td><input id="open_zacier_openUp" type="submit" value='OFF' /></td>
            <input type="hidden" name='ZacierValveInClose' value="1"/>
         </form>
      </tr>
    </table>
</div>


<g id="svg_213" onclick="document.getElementById('popup_2').style.display='block'"></g>
<g id="svg_349" onclick="document.getElementById('popup').style.display='block'"></g>
...