Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di BlueSmurf
    Registrato dal
    Sep 2015
    residenza
    Bari
    Messaggi
    42

    Transizione overlay con Javascript

    Salve ragazzi, sto creando per progetto universitario, un sito web. Nelle istruzioni del prov c'è scritto di utilizzare html css javascript (per client) e php, mysql (per server). Non sono tutti obbligatori, ma poichè ho creato un tasto 'chi siamo' con testo che viene mostrato in overlay, vorrei sapere se c'è un modo per implementare transition.
    Prima utilizzavo solo html e css, ma poichè per la chiusura ero costretto a indirizzare il tasto di chiusura verso un elemento della pagina, vorrei utilizzare javascript che risulta sicuramente più elegante (o no?). Ora il popup si chiude e apre, ma non ha transizione, e non so come inserirla
    Comunque vi posto in breve il mio codice
    codice:
    <button class="primaryButton" onclick="showPopup()">Chi Siamo</button>
    
    
    <div id = "popup1" class = "overlay" style='display: none'>
                <div class = "popup">
                    <h2>Chi Siamo</h2>
                    <a class = "close" onclick='closePopup()'>×</a>
                    <div class = "content">
                       testo overlay
                    </div>
                </div>
            </div>
    <script>
    function showPopup(){
     document.getElementById('popup1').setAttribute('style',' opacity:1; display: block' );
         }
    
    </script>
    
    CSS: #popup1     {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 700ms;
            opacity: 0;
        }

  2. #2
    codice:
    <button class="primaryButton" onclick="showPopup()">Chi Siamo</button>
    
    
    <div id = "popup1" class = "overlay" style='visibility:hidden'>
                <div class = "popup">
                    <h2>Chi Siamo</h2>
                    <a class = "close" onclick='closePopup()'>×</a>
                    <div class = "content">
                       testo overlay
                    </div>
                </div>
            </div>
    <script>
    function showPopup(){
     document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
         }
    
    </script>
    
    CSS: #popup1     {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 700ms;
            opacity: 0;
        }
    Il "display block" non è una proprietà che può essere "mostrata parzialmente".
    Un elemento ha un display block, oppure no. Non ci sono vie di mezzo.

    Utilizza al suo posto la proprietà "visibility" (hidden/visible).

  3. #3
    Utente di HTML.it L'avatar di BlueSmurf
    Registrato dal
    Sep 2015
    residenza
    Bari
    Messaggi
    42
    Sì prima avevo impostato visibility:hidden e visible, ma non cambia nulla, va bene js così?

  4. #4
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    codice:
    <button class="primaryButton" onclick="showPopup()">Chi Siamo</button>
    
    
    <div id = "popup1" class = "overlay" style='visibility:hidden'>
                <div class = "popup">
                    <h2>Chi Siamo</h2>
                    <a class = "close" onclick='closePopup()'>×</a>
                    <div class = "content">
                       testo overlay
                    </div>
                </div>
            </div>
    <script>
    function showPopup(){
     document.getElementById('popup1').setAttribute('style',' opacity:1; visibility:visible' );
         }
    
    </script>
    
    CSS: #popup1     {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 700ms;
            opacity: 0;
        }
    Codice funzionante

  5. #5
    Utente di HTML.it L'avatar di BlueSmurf
    Registrato dal
    Sep 2015
    residenza
    Bari
    Messaggi
    42
    Grazie Mille

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.