JQuery: Trabalhando com Janela Modal – Mapa do Brasil

admin 17 de maio de 201317 de maio de 2013 1 Comment fancybox, modal

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

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JQuery: Janela Modal - Mapa do Brasil</title>
 
  <link rel="StyleSheet" href="css/style.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.4"></script>
  <link type="text/css" href="js/jquery.fancybox.css?v=2.1.4" rel="stylesheet" media="screen" />
 
  <script>
    $(function() {
      $('.boxUF').fancybox({
        helpers   : {
          overlay : { closeClick: false },
          title:  null
        },
        keys : {
          close : null
        },
        beforeShow : function() {
	  var id = $(this.element).attr("rel");
	  $.ajax({
            type: "POST",
            url: "acoes.php",
            data: { acao: "buscaDados", id: id }
          }).done(function( data ) {
            $("#modal").html(data);
          });
        }
      });
    });
</script>
</head>
<body>
<br /><br />
<div id="all"> 
  <div class="divPR">          
    <a rel="41" class="boxUF" title="PR" href="#modal">
    <div class="PR"></div>
    </a>
  </div>            
  <div class="divSP">          
    <a rel="35" class="boxUF" title="SP" href="#modal">
    <div class="SP"></div>
    </a> 
  </div>
  <div class="divSC">
    <a rel="42" class="boxUF" title="SC" href="#modal">
    <div class="SC"></div>
    </a> 
  </div>
  <div class="divRS">
    <a rel="43" class="boxUF" title="RS" href="#modal">
    <div class="RS"></div>
    </a>
  </div>          
  <div class="divMS">          
    <a rel="51" class="boxUF" title="MS" href="#modal">
    <div class="MS"></div>
    </a>   
  </div>          
</div>
<div id="modal"></div>
</body></html>

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

<?php
$acao   = isset($_REQUEST['acao']) ? $_REQUEST['acao'] : '';
$id	= isset($_POST['id']) ? (int) $_POST['id'] : '';
 
switch($acao){
  case "buscaDados":
    echo '
    <p>DETALHES</p>
    <br />
    <p>ID: '.$id.'</p>';
  break;
}
?>

One thought on “JQuery: Trabalhando com Janela Modal – Mapa do Brasil”

Valter Ferreira Martins

17 de maio de 2013 em 10:13

Olá Tiago,
realmente esse script ficou muito bom, funcional.
Agradeço novamente a ajuda, vou com certeza repassar esse link.
Abraços.
Resposta

Você pode gostar também

JQuery: Trabalhando com JSON

JQuery: Passando $(this) para função

JQuery: Trabalhando com INPUTs

One thought on “JQuery: Trabalhando com Janela Modal – Mapa do Brasil”

Deixe um comentário Cancelar resposta