0

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }
    
    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }
    
    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }
    
    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    
    .modal-header {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }
    
    .modal-body {padding: 2px 16px;}
    
    .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }
    
    body {margin:20px;}
    
    div.polaroid {
      width: 35%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
    }
    
    div.container {
        width: 80%;
        border: 1px #FFFFFF;
    }
    
    
    header {
        padding: 1em;
        color: white;
        background-color: #FFFFFF;
        clear: left;
        text-align: center;
    }
    
    nav {
        float: left;
        max-width: 160px;
        margin: 0;
        padding: 1em;
    }
    
    nav ul {
        list-style-type: none;
        padding: 0;
    }
       
    nav ul a {
        text-decoration: none;
    }
    
    article {
        margin-left: 180px;
        border-left: 1px #FFFFFF;
        padding: 1em;
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    
    <div class="container">
    
    <header>
       
    </header>
      
    <nav>
      <ul>
         <div class="polaroid">
      <div class="container">
        <p></p>
     <!-- Trigger/Open The Modal -->
    <button id="myBtn">Pagina 1   </button>
      </div>
       
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Pagina 1</h2>
        </div>
        <div class="modal-body">
          <p>AQUI VOCE ENCONTRA A MELHO OPÇAO</p>
          <p>FONE: </p>
    	  <p>FONE: </p>
    	  <p>FONE: </p>
    	  <p>FONE: </p>
    	  
        </div>
        <div class="modal-footer">
          <h3></h3>
        </div>
      </div>
      </ul>
    </nav>
    
    
    
    
    
    
    
    <article>
    
    	 <div class="polaroid">
      <div class="container">
        <p></p>
     <!-- Trigger/Open The Modal -->
    <button id="myBtn">Pagina 2</button>
      </div>
       
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Pagina 2</h2>
        </div>
        <div class="modal-body">
          <p>AQUI VOCE ENCONTRA A MELHO OPÇAO</p>
          <p>FONE: </p>
    	  <p>FONE: </p>
    	  <p>FONE: </p>
    	  <p>FONE: </p>
    	  
        </div>
        <div class="modal-footer">
          <h3></h3>
        </div>
      </div>
    	</article>
    
    
    <script>
    // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>
    
    
    
    
    </body>
    </html>

3
  • Explique melhor o problema que está enfrentando.
    – MagicHat
    19/02/2017 às 15:28
  • quando se clica na pagina 2 não aparece uma nova caixa de modal e esse problema q enfreto 19/02/2017 às 15:30
  • em vez de id para o botão use class, dependendo de qual botão você clicou é só fazer as alterações dentro do if 19/02/2017 às 15:35

1 Resposta 1

0

podes sempre criar subclass's para cada tema ex:

.modal.tema1
{
/*styles para esse tema aqui....*/
}
.modal.tema1 .modal-content
...

depois quando chamas a tua modal, no teu html colocas tambem a class "tema1..."

ex:

<div class="modal tema1">o resto do conteudo aqui....</div>

depois e so repetir o processo para as outras, claro, cada uma com uma class secundaria diferente

pesquisa por css e por html um pouco que vais conseguir fazer isso facil

4
  • e possivel usar isso sem usar o php ? 19/02/2017 às 22:21
  • tu não precisas usar php para fazer coisas de css/js/html... 21/02/2017 às 2:06
  • o php irás utilizar posteriormente do lado do servidor http, para que possas buscar dados das bases de dados e mostrar ao utilizador entre outras coisas 21/02/2017 às 2:12
  • pesquisa um pouco o que é cada coisa por favor... 21/02/2017 às 2:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .