JQuery: Trabalhando com Janela Modal – Mapa do Brasil

Um dos assuntos mais procurados pela massa de desenvolvedores é a utilização de janela modal em projetos web.

Juntamente com um grande colaborador do blog, Valter Ferreira Martins, foi criado este post e compartilho com vocês.

Clique aqui para ver o script funcionando.

Foi utilizado o mapa para ficar mais fácil o entendimento, mas poderá ser adaptado facilmente para sua necessidade.

Para o efeito de janela modal vamos utilizar o plugin fancybox.

Estrutura do diretório:

modal-mapa–|
————| css (formatação da página)
————| images (arquivo de imagem – mapa do brasil)
————| js (jquery e plugin+complementos)

Vamos ao código:

O código é um pouco grande, mas de fácil interpretação.

Qualquer dúvida, poste nos comentários e teremos o maior prazer de responder.

Leia este post para entender os parâmetros do plugin.

index.php

style.css

* {
    border: 0 none;
    color: #777777;
    font: 12px Arial,Verdana,Helvetica,sans-serif;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline;
}
#all{ 
    margin:0 auto; 
    width:374px; /* largura da imagem */ 
    height:351px; /* altura da imagem */
    background:url(../images/mapa.jpg) no-repeat;
}

/* SP */
.divSP {
    position: relative;
    background-color: #003399;
    width: 25px;
    height: 28px;
    top: 195px;
    left: 210px;
}
.SP {
    width: 25px;
    height: 28px;
}
/* PR */
.divPR {
    position: relative;
    background-color: #00FF00;
    width: 40px;
    height: 28px;
    top: 250px;
    left: 180px;
}
.PR {
    width: 40px;
    height: 28px;
}
/* PR */
.divSC {
    position: relative;
    background-color: #CC0000;
    width: 40px;
    height: 20px;
    top: 220px;
    left: 180px;
}
.SC {
    width: 40px;
    height: 20px;
}
/* RS */
.divRS {
    position: relative;
    background-color: #996666;
    width: 55px;
    height: 40px;
    top: 220px;
    left: 160px;
}
.RS {
    width: 55px;
    height: 40px;
}
/* MS */
.divMS {
    position: relative;
    background-color: #0099FF;
    width: 45px;
    height: 25px;
    top: 100px;
    left: 150px;
}
.MS {
    width: 45px;
    height: 25px;
}

acoes.php

DETALHES
    

    
ID: '.$id.'
';
  break;
}
?>