There is a simple script that allows you to open a popup window on the page. Tell me how you need to change this script so that with its help you can open several popup windows on the page?

Prepared an example:

#Fpp-background { display: none; position: fixed; z-index: 100; opacity: 0.8; overflow: auto; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.925); } #Fpp-window { display: none; background: #fff; position: fixed; z-index: 200; height: auto; margin: 70px auto; text-align: center; overflow-y: auto; left: 0; right: 0; top: 0; bottom: 40px; } 
 <script type="text/javascript"> //Функция показа function show(state){ document.getElementById('Fpp-window').style.display = state; document.getElementById('Fpp-background').style.display = state; } </script> <div onclick="show('none')" id="Fpp-background"></div> <!--01--> <div id="Fpp-window"> <p>Hide text</p> <button onclick="show('none')">Close</button> </div> <a href="#open" onclick="show('block')"><!--Открыть--> <p>Click open 01</p> </a> <!--02--> <div id="Fpp-window"> <p>Hide text 02</p> <button onclick="show('none')">Close</button> </div> <a href="#open" onclick="show('block')"><!--Открыть--> <p>Click open 02</p> </a>

Here, Click open 01 works as it should. And Click open 02 is gone. I suspect that the task is very simple for those who know javascript.

    1 answer 1

    The fact is that id is a unique element on the page, and you have 2 blocks with the same id, so when you call getElementById ('Fpp-window') it finds the first one and applies actions to it.

    To prescribe one style to different blocks, classes are used in css.

    Here is your working example:

     #Fpp-background { display: none; position: fixed; z-index: 100; opacity: 0.8; overflow: auto; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.925); } .Fpp-window { display: none; background: #fff; position: fixed; z-index: 200; height: auto; margin: 70px auto; text-align: center; overflow-y: auto; left: 0; right: 0; top: 0; bottom: 40px; } 
     <script type="text/javascript"> //Функция показа function show(state, id){ if(id!=null) document.getElementById(id).style.display = state; else{ document.getElementById('Fpp-window').style.display = state; document.getElementById('Fpp-window-second').style.display = state; } document.getElementById('Fpp-background').style.display = state; } </script> <div onclick="show('none')" id="Fpp-background"></div> <!--01--> <div id="Fpp-window" class="Fpp-window"> <p>Hide text</p> <button onclick="show('none', 'Fpp-window')">Close</button> </div> <a href="#open" onclick="show('block', 'Fpp-window')"><!--Открыть--> <p>Click open 01</p> </a> <!--02--> <div id="Fpp-window-second" class="Fpp-window"> <p>Hide text 02</p> <button onclick="show('none', 'Fpp-window-second')">Close</button> </div> <a href="#open" onclick="show('block', 'Fpp-window-second')"><!--Открыть--> <p>Click open 02</p> </a>

    • Komdosh, thank you! You helped me, the script works as it should. - ov seo