Olá, tenho o seguinte SCRIPT abaixo. Ele abre a DIV que está com display:none; porem vou ter uma lista de links para abrir novas DIV's e não quero ficar criando novas function para abrir cada DIV.
Como poderia resolver isso?
HTML
<a href="javascript:;" onClick="abre();"> Abrir div 01 </a>
<a href="javascript:;" onClick="abre1();"> Abrir div 02 </a>
<div id="box" class="bg-box">
<img src="images/capa-revista.jpg" class="responsive-img">
<a class="" onClick="fechar();"> fechar </a>
</div>
<div id="box" class="bg-box">
<img src="images/capa-revista.jpg" class="responsive-img">
<a class="" onClick="fechar1();"> fechar </a>
</div>
css
.bg-box{
display:none;
width:100%;
height:100%;
background-color:rgba(3, 3, 3, 0.8) !important;
position:fixed; z-index:999;
top:0px;
left:0px;
color:#999;
font-size:16px;
}
JS
<script>
function abre() {
$("#box").fadeIn(700);
}
function fechar() {
$("#box").fadeOut(700);
}
function abre1() {
$("#box1").fadeIn(700);
}
function fechar1() {
$("#box1").fadeOut(700);
}
</script>