how can I create the modal boxes by placing various different themes in the boxes

Asked

Viewed 40 times

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>

  • Explain better the problem you are facing.

  • when you click on page 2 a new modal box does not appear and this problem you face

  • instead of id to the use class button, depending on which button you clicked just make the changes inside the if

1 answer

0

you can always create subclass’s for each theme ex:

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

then when you call your modal, in your html you also put the class "tema1..."

ex:

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

then and only repeat the process for the others, of course, each with a different secondary class

search by css and html a little that you will be able to make it easy

  • it is possible to use this without using php ?

  • you don’t need to use php to do css/js/html things...

  • php will use later on the http server side, so you can fetch data from databases and show the user among other things

  • search a little what is each thing please...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.