<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Modal Accesible Ministerio</title>
<link rel="stylesheet" href="./style.css">
<style>
.madContenedorModal {
width: 90%;
margin: auto;
}
.madConteido {
display: block;
position: fixed;
top: 25%;
left: 5%;
color: #222;
border: 2px double #555;
background-color: rgb(255, 255, 255);
height: 50%;
width: 90%;
z-index: 5;
overflow-y: scroll;
}
@media (min-width: 768px) {
.madConteido {
left: 25%;
width: 50%;
}
}
#pestanas {
float: top;
font-size: 3ex;
font-weight: bold;
}
#pestanas area {
list-style-type: none;
float: left;
margin: 0px 2px -2px -0px;
background: darkgrey;
border-radius: 5px 5px 0px 0px;
border: 2px solid bisque;
border-bottom: dimgray;
padding: 0px 20px;
cursor: pointer;
}
#pestanas area.selected {
background: #ccc;
cursor: inherit;
}
.mad-modal-overlay {
background: rgba(0, 0, 0, .8);
height: 100%;
left: 0;
overflow: auto;
padding: 0em;
position: fixed;
top: 0;
transition: opacity .2s;
width: 100%;
z-index: -1;
opacity: 0;
visibility: hidden;
}
.mad-modal-overlay-ok {
opacity: 1;
visibility: visible;
z-index: 1;
}
button.close {
position: absolute;
top: 0;
right: 0;
}
#contenido .hide {
display: none;
}
</style>
</head>
<body>
<header>
<h1>Modal / Dialog</h1>
</header>
<main>
<div class="madContenedorModal">
<div class="mad-modal-overlay"></div>
<h2>Mapa</h2>
<img id="MapaEspana" alt="Mapa de España" src="./Spain.gif" usemap="#DirectoryMap" />
<map name="DirectoryMap" id="DirectoryMap">
<div id="pestanas">
<area data-id="cadiz" class="show" aria-haspopup="true" href="#" shape="poly"
coords="229,299,235,295,269,288,258,306,266,318,257,331,248,331,236,321" alt="Cadíz" />
<area data-id="malaga" class="show" aria-haspopup="true" href="#" shape="poly"
coords="260,306,271,290,284,282,293,281,295,289,303,293,312,304,297,307,287,313,275,314,269,318,266,316,269,315"
alt="Málaga" />
<area class="show" aria-haspopup="true" href="#" shape="poly"
coords="294,281,305,275,317,269,333,266,341,251,350,252,348,265,339,279,332,285,326,302,317,304,313,306,316,304,315,304"
alt="Granada" />
<area class="open" href="#" shape="poly"
coords="328,304,356,302,361,302,373,278,370,272,361,267,358,255,354,255,351,266,341,280,336,283,329,300,331,302"
alt="Almería" />
<area href="/sitios/intranetdeh/perscont/Paginas/murcia.aspx" shape="poly"
coords="374,278,394,275,402,270,400,258,390,252,385,235,390,226,382,224,377,227,372,237,366,240,360,241,357,243,352,247,352,251,354,253,357,253,360,257,361,260,364,267,369,271"
alt="Murcia" />
<area href="/sitios/intranetdeh/perscont/Paginas/alicante.aspx" shape="poly"
coords="391,224,404,220,415,216,426,223,423,229,411,235,402,254,394,251,386,235,394,223"
alt="Alicante" />
<area href="/sitios/intranetdeh/perscont/Paginas/valencia.aspx" shape="poly"
coords="411,188,407,186,402,188,394,186,390,182,380,176,380,179,380,184,376,193,371,202,377,204,380,213,391,223,413,215,407,199"
alt="Valencia" />
<area href="/sitios/intranetdeh/perscont/Paginas/castellon.aspx" shape="poly"
coords="411,189,423,171,430,160,418,148,414,152,409,150,402,154,405,163,399,172,391,182,397,187,413,185"
alt="Castellón" />
<area href="/sitios/intranetdeh/perscont/Paginas/tarragona.aspx" shape="poly"
coords="432,162,421,150,420,138,427,130,440,128,448,117,455,125,458,133,449,139,438,146,435,157"
alt="Tarragona" />
<area href="/sitios/intranetdeh/perscont/Paginas/barcelona.aspx" shape="poly"
coords="460,134,474,129,478,122,489,113,478,105,479,102,473,96,466,98,464,93,461,94,457,94,454,106,449,118"
alt="Barcelona" />
<area href="/sitios/intranetdeh/perscont/Paginas/girona.aspx" shape="poly"
coords="458,91,457,85,470,85,479,86,485,80,495,82,499,94,498,102,495,107,491,111,478,104,480,100,473,94,460,94,461,92"
alt="Girona" />
<area href="/sitios/intranetdeh/perscont/Paginas/huelva.aspx" shape="poly"
coords="232,296,227,298,207,291,201,284,199,266,212,248,227,251,243,252,239,259,228,265,230,284"
alt="Huelva" />
<area href="/sitios/intranetdeh/perscont/Paginas/sevilla.aspx" shape="poly"
coords="242,252,240,260,231,265,233,297,268,289,284,282,271,266,261,269,262,263,255,247"
alt="Sevilla" />
<area href="/sitios/intranetdeh/perscont/Paginas/cordoba.aspx" shape="poly"
coords="255,249,253,237,272,228,277,236,284,238,294,243,295,264,301,273,299,278,292,283,284,279,274,267,263,268,255,236,254,238"
alt="Córdoba" />
<area href="/sitios/intranetdeh/perscont/Paginas/jaen.aspx" shape="poly"
coords="296,244,296,263,303,276,336,263,342,248,338,236,298,240,299,242" alt="Jaén" />
<area href="/sitios/intranetdeh/perscont/Paginas/albacete.aspx" shape="poly"
coords="341,251,354,251,356,242,370,238,376,228,379,224,390,223,392,219,382,214,375,200,362,207,359,205,351,209,337,206,335,216,339,225,337,235,344,248,345,248"
alt="Albacete" />
<area href="/sitios/intranetdeh/perscont/Paginas/cuenca.aspx" shape="poly"
coords="336,207,332,202,325,180,338,166,353,157,377,179,378,193,372,202,358,206,339,207"
alt="Cuenca" />
<area href="/sitios/intranetdeh/perscont/Paginas/ciudadreal.aspx" shape="poly"
coords="337,210,332,201,320,201,318,206,307,208,300,203,301,199,280,203,278,212,273,226,281,239,297,243,338,235"
alt="Ciudad Real" />
<area href="/sitios/intranetdeh/perscont/Paginas/toledo.aspx" shape="poly"
coords="299,201,302,205,315,206,323,200,332,201,324,180,309,188,307,181,302,176,290,175,281,175,264,180,266,192,271,206,279,203,290,199"
alt="Toledo" />
<area href="/sitios/intranetdeh/perscont/Paginas/badajoz.aspx" shape="poly"
coords="211,249,206,240,207,230,216,223,209,205,218,203,224,212,233,213,259,213,269,205,279,203,276,226,254,238,258,246,242,252"
alt="Badajoz" />
<area href="/sitios/intranetdeh/perscont/Paginas/caceres.aspx" shape="poly"
coords="262,181,271,205,255,212,226,211,220,203,209,203,204,197,213,193,222,186,218,175,235,167,245,174,250,170"
alt="Cáceres" />
<area href="/sitios/intranetdeh/perscont/Paginas/salamanca.aspx" shape="poly"
coords="219,174,219,147,231,140,249,141,266,140,269,147,267,154,250,170,245,172,237,168,222,173,221,170"
alt="Salamanca" />
<area href="/sitios/intranetdeh/perscont/Paginas/zamora.aspx" shape="poly"
coords="233,141,242,125,236,124,236,117,229,109,219,115,223,99,239,105,262,111,263,141,229,141"
alt="Zamora" />
<area href="/sitios/intranetdeh/perscont/Paginas/avila.aspx" shape="poly"
coords="262,182,252,170,269,153,269,142,280,141,283,153,293,161,287,173,276,174"
alt="Ávila" />
<area href="/sitios/intranetdeh/perscont/Paginas/Madrid.aspx" shape="poly"
coords="288,174,295,158,314,139,318,158,322,163,325,176,310,186,307,178" alt="Madrid" />
<area href="/sitios/intranetdeh/perscont/Paginas/segovia.aspx" shape="poly"
coords="293,160,286,152,282,140,290,131,302,127,313,126,318,134" alt="Segovia" />
<area href="/sitios/intranetdeh/perscont/Paginas/guadalajara.aspx" shape="poly"
coords="326,177,323,161,318,156,316,141,320,134,335,134,340,142,355,140,365,144,368,157,362,164,354,158,336,167"
alt="Guadalajara" />
<area href="/sitios/intranetdeh/perscont/Paginas/valladolid.aspx" shape="poly"
coords="266,142,282,140,290,131,301,127,300,120,278,117,275,114,272,102,265,103,263,110"
alt="Valladolid" />
<area href="/sitios/intranetdeh/perscont/Paginas/teruel.aspx" shape="poly"
coords="364,167,369,155,369,145,379,140,394,139,396,133,418,139,420,150,410,151,402,154,405,163,391,181,380,178"
alt="Teruel" />
<area href="/sitios/intranetdeh/perscont/Paginas/zaragoza.aspx" shape="poly"
coords="367,146,378,140,394,136,401,133,418,139,425,130,409,127,387,110,381,85,373,90,372,108,368,113,361,109,359,120,351,139"
alt="Zaragoza" />
<area href="/sitios/intranetdeh/perscont/Paginas/lerida.aspx" shape="poly"
coords="426,75,425,79,428,103,422,115,420,127,440,128,450,114,457,94,456,84,448,87,448,81,430,75"
alt="Lérida" />
<area href="/sitios/intranetdeh/perscont/Paginas/huesca.aspx" shape="poly"
coords="386,76,382,86,389,110,411,127,425,130,422,115,429,99,425,78" alt="Huesca" />
<area href="/sitios/intranetdeh/perscont/Paginas/navarra.aspx" shape="poly"
coords="387,77,379,85,373,89,372,108,368,112,360,109,359,100,341,91,350,75,362,62,373,71"
alt="Navarra" />
<area href="/sitios/intranetdeh/perscont/Paginas/soria.aspx" shape="poly"
coords="319,135,314,126,321,114,332,108,347,105,360,114,361,120,353,139,342,143,336,134"
alt="Soria" />
<area href="/sitios/intranetdeh/perscont/Paginas/larioja.aspx" shape="poly"
coords="324,89,326,110,349,104,360,112,359,97,343,93" alt="La Rioja" />
<area href="/sitios/intranetdeh/perscont/Paginas/burgos.aspx" shape="poly"
coords="326,112,326,89,320,80,323,73,309,70,302,75,304,85,298,86,291,91,300,110,300,118,307,127,316,126"
alt="Burgos" />
<area href="/sitios/intranetdeh/perscont/Paginas/palencia.aspx" shape="poly"
coords="277,77,274,102,277,117,301,121,301,111,292,90,299,86,290,78" alt="Palencia" />
<area href="/sitios/intranetdeh/perscont/Paginas/leon.aspx" shape="poly"
coords="222,101,263,110,265,102,274,101,279,75,275,68,269,75,246,74,235,76,221,80,218,82,216,95"
alt="León" />
<area href="/sitios/intranetdeh/perscont/Paginas/alava.aspx" shape="poly"
coords="346,80,341,91,327,90,319,82,324,71,335,74" alt="Álava" />
<area href="/sitios/intranetdeh/perscont/Paginas/guipuzcoa.aspx" shape="poly"
coords="340,63,351,64,358,59,363,63,348,79,338,74" alt="Guipuzcoa" />
<area href="/sitios/intranetdeh/perscont/Paginas/vizcaya.aspx" shape="poly"
coords="338,65,338,73,324,72,311,70,329,60" alt="Vizcaya" />
<area href="/sitios/intranetdeh/perscont/Paginas/cantabria.aspx" shape="poly"
coords="275,71,284,67,287,61,306,57,327,62,304,74,305,85,289,78" alt="Cantabria" />
<area href="/sitios/intranetdeh/perscont/Paginas/asturias.aspx" shape="poly"
coords="285,63,283,67,275,67,272,74,245,74,220,80,215,59,231,55,252,54,289,61,277,67,275,68,274,73"
alt="Asturias" />
<area href="/sitios/intranetdeh/perscont/Paginas/lugo.aspx" shape="poly"
coords="216,58,202,49,199,58,191,80,194,91,204,97,214,97,220,77" alt="Lugo" />
<area href="/sitios/intranetdeh/perscont/Paginas/ourense.aspx" shape="poly"
coords="193,90,188,90,183,95,187,102,189,114,200,114,214,118,224,101,217,95,203,97"
alt="Orense" />
<area href="/sitios/intranetdeh/perscont/Paginas/acoruna.aspx" shape="poly"
coords="199,49,187,54,188,59,170,59,157,70,163,91,170,89,173,81,192,78" alt="La Coruña" />
<area href="/sitios/intranetdeh/perscont/Paginas/pontevedra.aspx" shape="poly"
coords="169,92,175,83,191,78,193,88,183,93,186,105,169,117,167,108" alt="Pontevedra" />
<area href="/sitios/intranetdeh/perscont/Paginas/illesbalears.aspx" shape="poly"
coords="481,190,502,171,504,178,513,182,504,199,492,190,486,195" alt="Islas Baleares" />
<area href="/sitios/intranetdeh/perscont/Paginas/sctenerife.aspx" shape="poly"
coords="445,328,457,327,445,350,437,352,429,337" alt="Santa Cruz de Tenerife" />
<area href="/sitios/intranetdeh/perscont/Paginas/laspalmas.aspx" shape="poly"
coords="475,338,485,342,486,355,478,358,469,349" alt="Las Palmas de Gran Canaria" />
<area href="/sitios/intranetdeh/perscont/Paginas/melilla.aspx" shape="poly"
coords="363,350,376,347,376,358,362,360" alt="Melilla" />
<area href="/sitios/intranetdeh/perscont/Paginas/ceuta.aspx" shape="poly"
coords="247,341,264,339,264,352,249,353" alt="Ceuta" />
</div>
</map>
<div id="contenido">
<div id="cadiz" class="hide madConteido">
<section class="modal" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<section class="mad-modal__content">
<h2 class="mad-dialog-title" tabindex="-1">Delegación de Economía y Hacienda de Cádiz</h2>
<ul>
<li>
<strong>Delegado Provincial de Economía y Hacienda</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>José Mª. Rodríguez Abela<br /></p>
<p>Teléfonos: 952.075.602/00  (25602/4)</p>
<p>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Secretario General</strong>:</li>
</ul>
<p>          Carmen Gómez-Blanco Pontes</p>
<blockquote dir="ltr">
<p>Teléfono: 952.075.643   (25643)</p>
<p> <a href="mailto:CGomezB@igae.hacienda.gob.es">CGomezB@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Gerente del Catastro</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>Francisco Pérez-Vivar López</p>
<p>Teléfono: 952.075.600  (25697)</p>
<p>
<a
href="mailto:francisco.perez-vivar@catastro.hacienda.gob.es">francisco.perez-vivar@catastro.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Interventor  Territorial:</strong></li>
</ul>
<blockquote dir="ltr">
<div>José Mª.Rodríguez Abela</div>
<div> </div>
<div>Teléfonos: 952.075.602  (25602/4)</div>
<div> </div>
<div>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</div>
<p> </p>
</blockquote>
<p> </p>
<button class="close" aria-label="close" type="button">X</button>
</section>
</section>
</div>
<div id="malaga" class="hide madConteido">
<section class="modal" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<section class="mad-modal__content">
<h2 class="mad-dialog-title" tabindex="-1">Delegación de Economía y Hacienda de Málaga</h2>
<ul>
<li>
<strong>Delegado Provincial de Economía y Hacienda</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>José Mª. Rodríguez Abela<br /></p>
<p>Teléfonos: 952.075.602/00  (25602/4)</p>
<p>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Secretario General</strong>:</li>
</ul>
<p>          Carmen Gómez-Blanco Pontes</p>
<blockquote dir="ltr">
<p>Teléfono: 952.075.643   (25643)</p>
<p> <a href="mailto:CGomezB@igae.hacienda.gob.es">CGomezB@igae.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Gerente del Catastro</strong>:</li>
</ul>
<blockquote dir="ltr">
<p>Francisco Pérez-Vivar López</p>
<p>Teléfono: 952.075.600  (25697)</p>
<p>
<a
href="mailto:francisco.perez-vivar@catastro.hacienda.gob.es">francisco.perez-vivar@catastro.hacienda.gob.es</a>
</p>
<p> </p>
</blockquote>
<ul>
<li>
<strong>Interventor  Territorial:</strong></li>
</ul>
<blockquote dir="ltr">
<div>José Mª.Rodríguez Abela</div>
<div> </div>
<div>Teléfonos: 952.075.602  (25602/4)</div>
<div> </div>
<div>
<a
href="mailto:JMRodriguezA@igae.hacienda.gob.es">JMRodriguezA@igae.hacienda.gob.es</a>
</div>
<p> </p>
</blockquote>
<p> </p>
<button class="close" aria-label="close" type="button">X</button>
</section>
</section>
</div>
<div id="granada" class="hide madConteido">
<section class="modal" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<section class="mad-modal__content">
<button class="close" aria-label="close" type="button">X</button>
</section>
</section>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="./script.js"></script>
</html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="./script.js"></script>
<script>
let contenido;
let pestanas;
let buton;
let areamapa;
window.onload = () => {
modaloverlay = document.querySelector(".mad-modal-overlay");
dialogTitle = document.querySelector(".mad-dialog-title");
// obtenemos todos los elementos de las pestañas
pestanas = document.querySelectorAll('#pestanas>area');
// obtenemos todos los elementos deL BOTON CERRAR
buton = document.querySelectorAll('#pestanas>button');
// obtenemos todo los elementos de los contenidos
contenido = document.querySelectorAll('#contenido>div');
// generamos el evento click para cada pestaña
pestanas.forEach(el => el.addEventListener("click", clickPestana));
}
/* ESCAPE*/
$(document).on('keydown keyup', function (e) {
if (e.which == 27) {
$(".madConteido").addClass("hide");
$(".mad-modal-overlay").removeClass("mad-modal-overlay-ok")
document.addEventListener('keydown', useEsc);
pestanas.forEach(el => el.dataset.id == this.dataset.id
? el.classList.focus()
: el.classList.focus()
);
}
});
// CLOSE
$(".close").on("click", function () {
$(".madConteido").addClass("hide");
$(".mad-modal-overlay").removeClass("mad-modal-overlay-ok")
document.addEventListener('keydown', useEsc);
pestanas.forEach(el => el.dataset.id == this.dataset.id
? el.classList.focus()
: el.classList.focus()
);
});
// OPEN
function clickPestana(e) {
// añadimos la clase "selected" a la pestaña seleccionada
pestanas.forEach(el => el.dataset.id == this.dataset.id
? el.classList.add("selected")
: el.classList.remove("selected")
);
// añadimos la clase "hide" a todos los elementos menos al que
// pertenece a la pestaña seleccionada
contenido.forEach(el => this.dataset.id == el.id
? el.classList.remove("hide")
: el.classList.add("hide")
);
dialogTitle.focus();
$(".mad-modal-overlay").addClass("mad-modal-overlay-ok");
}
</script>