Проблема с правильным закрытием модальных окон

[Krasi]

Проблема с правильным закрытием модальных окон

http://meurch.ru/ Посмотрите, пожалуйста. Здесь для каждого сингла и альбома есть ссылка "Подробнее" вида meurch.ru/#ModalWindow

Каждое отдельное модальное окно сделано на свойствах CSS opacity и pointer-events:

<style>
.modalbackground {
margin: 0; /* убираем отступы */
padding: 0; /* убираем отступы */
position: fixed; /* фиксируем положение */
top:0; /* растягиваем блок по всему экрану */
bottom:0;
left:0;
right:0;
background: rgba(0,0,0,0.5); /* полупрозрачный цвет фона */
z-index:100; /* выводим фон поверх всех слоев на странице браузера */
opacity:0; /* Делаем невидимым */
pointer-events: none; /* элемент невидим для событий мыши */
}

/* при отображении модального окно - именно здесь начинается магия */
.modalbackground:target {
    opacity: 1; /* делаем окно видимым */ 
    pointer-events: auto; /* элемент видим для событий мыши */
}

/* ширина диалогового окна и его отступы от экрана */
.modalwindow {
    width: 100%;
    max-width: 500px;
    margin: 10% auto;
    padding: 2%;
    background: #fff;
    border-radius: 3px;
}

/* настройка заголовка */
.modalwindow h3 {
padding: 0;
margin: 0;
}

/* оформление сообщение */
.modalwindow p {
padding: 0;
margin: 4% 0 8% 0;
}

/* вид кнопки ЗАКРЫТЬ */
.modalwindow a {
display: block;
color: #fff;
background: #369;
padding: 2%;
margin: 0 auto;
width: 50%;
border-radius: 3px;
text-align: center;
text-decoration: none;
}

/* вид кнопки ЗАКРЫТЬ при наведении на нее мыши */
.modalwindow a:hover {
background: #47a;
}
</style>

Поэтому я решил, что когда пользователь устал смотреть на модальное окно и закрывает его - он не должен перезагружать страницу и должен остаться там, где он находится (где-то в середине читаемой странице, например). Для этого закрытие я сделал следующим образом:

<script type="text/javascript">
    function showhide(id) {
       	var e = document.getElementById(id);
       	e.style.opacity = (e.style.opacity == '0') ? '1' : '0';
       	e.style.pointerEvents = (e.style.opacity == '0') ? 'none' : 'auto';
     }
</script>

По кнопке мы либо выставляем свойства, либо убираем. В принципе оно работает, но появилась другая проблема. Когда я один раз закрыл модальное окно - именно это модальное окно второй раз я уже не открыть не смогу, это можно потыкать на сайте. Другие окна открываются при этом, но тоже только единожды. Подскажите, почему так может работать, и как сделать, чтобы модальные окна открывались сколько угодно раз?

[ADSoft]

да потому-что скрипт showhide() нужно лишь один раз объявить на весь документ, не надо плодить их после каждого блока, где-нибудь в начале документа всего или конце

а вызывать как-то так

<a href="#Фиолетовое солнце" onclick="showhide('Фиолетовое солнце')">Подробнее</a>

без магии - .modalbackground:target

[Krasi]

Вынес скрипт за пределы цикла, поправил ссылки, в которые добавил Show Hide.
Теперь другая проблема - окна открываются со второго раза. Когда открываю их уже второй раз - то с первого. В чем может быть проблема?

Ну я понимаю, что видимо showhide и по ай ди изменения свойств конфликтуют, но как проще и правильнее поправить?

Хотя в целом решил. Скрипт с ума сходил, когда ему показывать а когда скрывать окно. Ввел второй аргумент просто типа 'show'