Здравствуйте, подскажите пожалуйста, как сделать возможным открытие нескольких модальных окон на одной странице. Есть к примеру таблица с кнопками, при нажатии на каждую кнопку открывается окно с текстом, по стилям окна все одинаковые, меняется только текст и изображение внутри.
Вот код с которым я вожусь уже неделю и ничего не получается ) инет облазил, но толком ничего не нашел. Зарание благодарю за помощь.
<button onClick="getElementById('win').removeAttribute('style');" type="button">Модальное окно</button>
<div id="win" style="display:none;">
<div id="win">
<div class="overlay"></div>
<div class="visible">
<h2>Заголовок окна</h2>
<div class="content">
<p>Содержание</p>
<p>Модальное окно фиксированной ширины</p>
</div>
<button type="button" onClick="getElementById('win').style.display='none';">закрыть</button>
</div>
</div>
.overlay {
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1000;
opacity: .5;
}
.visible {
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-top: -200px;
overflow: hidden;
z-index: 2000;
width: 500px;
padding: 0px;
margin-left: -250px;
}
#win button {
float: right;
line-height: 20px;
margin: 1.2em;
border: none;
background: transparent;
color: blue;
}
#win button[type="button"]:hover {
cursor: pointer;
color: navy;
text-decoration: underline;
}
#win h3 {
text-align: center;
color: #555;
}
.content {
padding: 0 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: WhiteSmoke;
}
.
