Finestra dialogo CSS Modal

Yeshua · 2018-08-06T16:30:40+0200

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...

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>

Max 1 · 2018-08-06T16:48:38+0200

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>

Yeshua · 2018-08-06T17:38:39+0200

ciao Max 1, innanzi tutto grazie per avermi risposto...
io purtroppo non sono un professionista come descritto nella mia presentazione
https://forum.mrw.it/threads/ciao-da-yeshua.52025/

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

Sicuramente sbaglio qualcosa . . .

Max 1 · 2018-08-07T14:57:33+0200

Lo script funziona benissimo!

Yeshua ha scritto:
Ho inserito il tuo codice nella mia pagina ma non mi funziona.

Quale pagina? Se non vediamo nulla come facciamo a darti una risposta! Mago Merlino è in ferie!

Yeshua · 2018-08-09T16:03:37+0200

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

Max 1 · 2018-08-09T16:21:21+0200

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

LinuxOhYeah · 2018-08-13T16:21:45+0200

ho dato uno sguardo veloce, con check sintassi, e ci sono 2 <head> , <body> , <html> ed elementi non chiusi. Se vuoi modificare una pagina fatta da un generatore come One.com, dovresti dare un'occhiata alle basi html per me.

https://www.mrw.it/html/guida-html/

sezioni 'base' head, body, html : https://www.mrw.it/html/struttura-pagina-html_10758.html

Cerca

Cerca

Finestra dialogo CSS Modal

Yeshua

Nuovo Utente

Max 1

Super Moderatore

Yeshua

Nuovo Utente

Max 1

Super Moderatore

Yeshua

Nuovo Utente

Max 1

Super Moderatore

LinuxOhYeah

Utente Attivo

Discussioni simili