Помогите с модальным окном.
Мне нужно модальное окно. В моем окне текст находится в ссылке, а мне нужно, чтобы текст который должен быть в модальном окне был в отдельном <div>. И допустим если есть 2 <div> с информацией. То скрипт должен выводить тот <div> на который нажали , а не первый в списке. Спасибо заранее.
------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wind</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function windOpen(text){
var wind=document.createElement("div");
wind.className="windBody";
wind.id="wind";
wind.innerHTML="<a href='javascript:windClose();' class='closeImg'></a><div class='windContent'>"+text+"</div>";
document.body.appendChild(wind);
$(".windBody").hide().fadeIn("slow");
$(document).ready(function(){
$(".windBody a.closeImg").animate({opacity:0.4},0)
.mouseover(function(){
$(this).stop().animate({opacity:0.9999},300);
})
.mouseout(function(){
$(this).stop().animate({opacity:0.4},300);
});
});
}
function windClose(){
var windClose=document.getElementById("wind");
windClose.parentNode.removeChild(windClose);
}
</script>
<style type="text/css">
.windBody{
width:100%; height:100%;
background:url(img/bg.png);
position:absolute; top:0; left:0;
overflow:scroll;
}
.windBody a{display:block; text-decoration:none; color:#000; }
.windBody a.closeImg{
display:block; width:20%; height:100%;
background:url(img/close.png) no-repeat 100% 0;
position:fixed; top:20px; right:40px;
}
.windContent{
display:block; width:60%;
padding:10px; margin:20px auto;
background:#eee; color:#1d1d1d; border:1px solid #666;
box-shadow:0 0 1px 1px #eee; -moz-box-shadow:0 0 1px 1px #eee; -webkit-box-shadow:0 0 1px 1px #eee;
}
</style>
</head>
<body>
<a href="javascript:windOpen('<img src=img/1.jpg width=300; /><br /><img src=img/1.jpg width=300; />')" class="op">open</a>
</body>
</html>
|