Как сделать несколько модальных окон?

Question

[olifem]

Есть такая конструкция

<script>
    $(document).ready(function(){
        PopUpHide();
    });

    function PopUpShow(){
        $("#popup").show();
    }

    function PopUpHide(){
        $("#popup").hide();
    }
</script>

И такая

<div id="popup" name="Users">
</div>

<div id="popup" name="Groups">
</div>

<a class="del" href="javascript:PopUpHide()" onclick="fync();" title="Close users">X</a>	
  <a class="del" href="javascript:PopUpHide()" onclick="fync();" title="Close groups">X</a>

И 2 кнопки соответственно

Как сделать несколько всплывающих окон?
Думаю все очень просто и при вызове функции нужно передать идентификатор, но не знаю как это сделать.

Answer 1

[Алексей Ярков]

$(document).ready(function(){
        PopUpHide('popup1');
    });

    function PopUpShow(id){
        $(`#${id}`).show();
    }

    function PopUpHide(id){
        $(`#${id}`).hide();
    }

<div id="popup1" name="Users">
</div>

<div id="popup2" name="Groups">
</div>

Comments

[olifem]

Работает! Спасибо)

Answer 2

[Михаил Захаров]

Модальные окна должны открываться по классам. Иметь более одного элемента с одинаковым id нельзя! Это id и он должен быть уникальным. Этот html не будет валидным.
А в кнопке можно передавать параметр, по которому он определит, которое окошко она должна открывать. Например, в data-атрибуте.