Finestra dialogo CSS Modal

Discussione in 'HTML e CSS' iniziata da Yeshua, 6 Agosto 2018.

  1. Yeshua

    Yeshua Nuovo Utente

    Registrato:
    6 Agosto 2018
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    salve ragazzi,

    ho trovato questo codice reperibile al seguente link:
    https://www.w3schools.com/w3css/w3css_modal.asp

    io vorrei però che la finestra di dialogo si aprisse all'apertura di una pagina web e non facendo click sul bottone.

    infine premendo sulla "x" della finestra di dialogo che si apre, ritornare indietro alla pagina web precedente.

    Grazie in anticipo a chiunque voglia aiutarmi... :confused:

    Codice:
    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
    
    <div class="w3-container">
    
        <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green">Open Animated Modal</button>
    
      <div id="id01" class="w3-modal">
        <div class="w3-modal-content w3-animate-zoom">
          <header class="w3-container w3-teal">
            <span onclick="document.getElementById('id01').style.display='none'"
            class="w3-button w3-display-topright">&times;</span>
            <h2>Modal Header</h2>
          </header>
          <div class="w3-container">
            <p>Some text..</p>
            <p>Some text..</p>
          </div>
          <footer class="w3-container w3-teal">
            <p>Modal Footer</p>
          </footer>
        </div>
      </div>
    </div>
              
    </body>
    </html>
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.074
    Mi Piace Ricevuti:
    234
    Punteggio:
    63
    Sesso:
    Maschio
    Codice:
    <!DOCTYPE html>
    
    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
      <meta charset="utf-8" />
    
      <!-- Set the viewport width to device width for mobile -->
      <meta name="viewport" content="width=device-width" />
    
      <title>Overlay jQuery con POPUP al caricamento della pagina</title>
     
     
    
      <style>
    
      body{font-family: 'Merriweather Sans', sans-serif; font-weight: 200;}
      h1 { font-family: 'Merriweather Sans', sans-serif; font-weight: 800;}
      h2 { font-family: 'Merriweather Sans', sans-serif; font-weight: 600;}
      h3 { font-family: 'Merriweather Sans', sans-serif; font-weight: 200; }
      a{ text-decoration: none;}
    
      .container{ width: 960px; margin: 0 auto; padding: 0; overflow: hidden;}
      #logo{ }
      #torna{ float: right; }
      .apri-trg-overlay{ background: #f7f7f7; border-bottom:1px solid #d2d2d2; border-right:1px solid #d2d2d2; width:26%; padding:20px; float: left; margin: 12px;}
    
    
      </style>
    
    
    
      <!-- APP CSS Files -->
      <link rel="stylesheet" href="../Documents/Javascript & HTML/Overlay al caricamento della pagina/stylesheets/targetweb-modal-overlay.css">
    
    </head>
    <body>
    
      <div class='overlay'></div>
    
      <div id="modal1" class="trg-overlay hide small">
        <div class="trg-modal-header">
        <h2>TrgReveal - small</h2>
        </div><!-- Modal header-->
        <p class="lead">Questo è un overlay</p>
        <p>Circumstances have taught me that a man's ethics are the only possessions he will take beyond the grave. i once heard a wise man say there are no perfect men. only perfect intentions. rehabilitated? </p>
        <a class="close-overlay">&#215;</a>
      </div>
    
    
    
      <div class="container">
    
    
      <hr />
    
      <p>Variante overlay al caricamento della pagina</p>
    
      </div><!--Container -->
    
    
      <!-- Included JS Files -->
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script src="../Documents/Javascript & HTML/Overlay al caricamento della pagina/javascripts/targetweb-modal-overlay.js"></script>
     <script>
     $(document).ready(function() {
    
        TrgModalOverlayLoader("modal1");
        
     });
     </script>
    
    
    
    </body>
    </html>
     
  3. Yeshua

    Yeshua Nuovo Utente

    Registrato:
    6 Agosto 2018
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    ciao Max 1, innanzi tutto grazie per avermi risposto...
    io purtroppo non sono un professionista come descritto nella mia presentazione
    https://forum.mrwebmaster.it/threads/ciao-da-yeshua.52025/

    Ho inserito il tuo codice nella mia pagina ma non mi funziona.

    Sicuramente sbaglio qualcosa . . .:(
    upload_2018-8-6_17-38-6.png
     
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.074
    Mi Piace Ricevuti:
    234
    Punteggio:
    63
    Sesso:
    Maschio
    Lo script funziona benissimo!
    Quale pagina? Se non vediamo nulla come facciamo a darti una risposta! Mago Merlino è in ferie!
     
  5. Yeshua

    Yeshua Nuovo Utente

    Registrato:
    6 Agosto 2018
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    non lo metto in dubbio che funzioni benissimo, infatti nel post di prima avevo detto che sicuramente sono io a sbagliare qualcosa poiché non sono bravo.
    Avevo fatto uno screenshoot della pagina non ancora pubblicata ed ora ti invio il link di un sito dove ho inserito lo script

    http://egook.it/

    si trova al centro della pagina
     
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.074
    Mi Piace Ricevuti:
    234
    Punteggio:
    63
    Sesso:
    Maschio
    Ad un primo controllo mi sembra che tu non abbia incluso tutto il codice che serve per il funzionamento.
    Prova a passarre il codice della tua pagina senza inserire nulla che faccio una prova io
     
  7. LinuxOhYeah

    LinuxOhYeah Utente Attivo

    Registrato:
    26 Novembre 2016
    Messaggi:
    122
    Mi Piace Ricevuti:
    3
    Punteggio:
    18
    Ultima modifica: 13 Agosto 2018 alle 16:28
Sto caricando...

Condividi questa Pagina