Finestra dialogo CSS Modal

Yeshua

Nuovo Utente
6 Ago 2018
8
0
1
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>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.369
338
83
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

Nuovo Utente
6 Ago 2018
8
0
1
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 . . .:(
upload_2018-8-6_17-38-6.png
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.369
338
83
Lo script funziona benissimo!
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

Nuovo Utente
6 Ago 2018
8
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.369
338
83
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
T Finestra di dialogo. PHP 1
R finestra di dialogo personalizzata con jquery ui jQuery 2
B file txt non apre finestra di dialogo apri/salva PHP 0
F Passare variabile a pulsante in finestra modale PHP 2
L Audio in finestra modale ed interruzione alla chiusura jQuery 9
AC1 Form in finestra modale PHP 1
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
C finestra popup dopo login PHP 2
L Visualizzare tabella all'interno finestra modal PHP 4
S [PHP] Finestra poupup dentro IF PHP 17
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
W [Javascript] Finestra modale Javascript 0
AMONRA75 [PHP] passare una variabile in una finestra MODAL PHP 1
romeocharly in win 10 mi si apre una finestra di configuraziuone di parametri di una cam errata Windows e Software 2
K [Javascript] Finestra menu Javascript 1
J [HTML] Finestra su pagina htm, HTML e CSS 5
T [PHP] passare una variabile in una finestra MODAL di bootstrap PHP 3
Antonio Nervi [Javascript] Nuova finestra Javascript 8
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
Monital [HTML] le inpuit text non si rimpiccioliscono se si diminuisce la finestra del browser HTML e CSS 4
A chiusura finestra dialog Popu jQuery 3
R [HTML] La finestra del browser non si autoadatta al mio sito HTML e CSS 3
CoyotesSon [PHP] Help! Creazione di una finestra PHP 5
Shyson Aprire finestra popup con Safari Javascript 6
P chi mi aiuta per costruire una finestra overlay ???? Javascript 1
L mailto: apre la finestra di posta in background HTML e CSS 2
E Realizzare una finestra overlay con caricamento pagina html HTML e CSS 3
J Programmazione di un finestra tipo popup Content Management System (CMS) 1
T Ritardare apertura finestra con Javascript Javascript 4
marino51 non riesco a caricare un allegato percgè non riesco a ridimensionare la finestra Supporto Mr.Webmaster 0
P Dopo il caricamento ajax non viene aperta finestra modale Ajax 9
A [JQUERY] Passare dati stessa finestra (Nyromodal) jQuery 0
A Apertura finestra modale al submit Ajax 0
felino Jquery UI Dialog Confirm: errore sulla chiusura della finestra jQuery 3
novello88 Problema finestra di conferma (che non appare) Javascript 1
M ASP.NET Response.Redirect che si apre in una nuova finestra ASP.NET 1
E Centrare finestra popup Javascript 7
R La finestra padre non si aggiorna con Chrome Javascript 1
A Problema con finestra modale jQuery 0
F Problema finestra popup jQuery 4
A Finestra overlay con id record mysql Javascript 5
S rimuovere pulsante chiusura (X) da una finestra Javascript 3
M messaggio visualizzato in una finestra Javascript 4
T apertura pagina elaborazione form in altra finestra Javascript 1
A Finestra di conferma Javascript 2
Z Cambiare colore alla finestra degli avvisi VBulletin 1
V risultato di un vettore in una finestra Java 5
Sevenjeak [Java] JDialog che si minimizza e ripristina con la finestra principale Java 2
A Aiutoo Finestra modale Javascript 1
H Azione alla chiusura di una finestra popup? PHP 1

Discussioni simili