[HTML] Apertura Pagina

muscaril

Utente Attivo
16 Mar 2009
46
0
6
Non riesco a far coesistere queste due codici
Sto cercando di far aprire una pagina cliccando su un pulsante con una animazione.

La pagina principale ha questa impostazione :

Codice:
<!-- start servizi -->
<div id="servizi" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12 wow bounce">
<h2>Di cosa ci occupiamo</h2>
</div>
<div class="col-sm-6 col-md-3 wow fadeInLeft" data-wow-delay="0.6s">
<div class="plan plan_one">
<h4 class="plan_title">Prova</h4>
<ul>
<div align="left">pppppp ppppppppppp pp,....</div>
</ul>
<button class="btn btn-warning">Continua</button>
</div>
Questo è il file contenente "style"
Codice:
/* start servizi */
 #servizi
 {
 border-bottom: 1px solid #f6f6f6;
 }
 #servizi .col-md-3,
 #servizi .col-sm-6
 {
 padding: 0;
 margin: 0;
 }
 #servizi .plan
 {
 border: 1px solid #f6f6f6;
 margin-top: 100px;
 transition: all 0.4s ease-in;
 padding: 40px;
 }
 #servizi .plan_one
 {
 margin-top: 60px;
 }
 #servizi .plan_two
 {
 margin-top: 80px;
 }
 #servizi .plan_three
 {
 margin-top: 40px;
 }
 #servizi .plan_four
 {
 margin-top: 0px;
 }
 #servizi .plan:hover
 {
 background: #202020;
 color: #ffffff;
 transform: scale(1.0);
 }
 #servizi .plan .plan_title
 {
 border-bottom: 1px solid #f6f6f6;
 color: #9bc848;
 font-size: 30px;
 padding: 20px;
 }
 #servizi .plan ul
 {
 padding: 0;
 }
 #servizi .plan ul li
 {
 display: block;
 padding: 20px 0 20px 0;
 }
 #servizi .plan .btn
 {
 background: #93ca3a;
 border: none;
 border-radius: 2px;
 font-weight: bold;
 font-size: 12px;
 width: 120px;
 margin-top: 20px;
 margin-bottom: 20px;
 transition: all 0.4s ease-in-out;
 }
 #servizi .plan .btn:hover
 {
 background: #FFFFFF;
 color: #66AF33;
 }
 /* end servizi */

Volevo aggiungere questo:
Codice:
<style>
 body {font-family: Arial, Helvetica, sans-serif;}
 /* Set a style for all buttons */
 button {
 background-color: #4CAF50;
 color: white;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 cursor: pointer;
 width: 100%;
 }
 button:hover {
 opacity: 0.8;
 }
 /* Center the image and position the close button */
 .imgcontainer {
 text-align: center;
 margin: 24px 0 12px 0;
 position: relative;
 }
 .container {
 padding: 16px;
 }

 /* The Modal (background) */
 .modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 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 */
 padding-top: 60px;
 }
 /* Modal Content/Box */
 .modal-content {
 background-color: #fefefe;
 margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
 border: 1px solid #888;
 width: 80%; /* Could be more or less, depending on screen size */
 }
 /* The Close Button (x) */
 .close {
 position: absolute;
 right: 25px;
 top: 0;
 color: #000;
 font-size: 35px;
 font-weight: bold;
 }
 .close:hover,
 .close:focus {
 color: red;
 cursor: pointer;
 }
 /* Add Zoom Animation */
 .animate {
-webkit-animation: animatezoom 0.6s;
 animation: animatezoom 0.6s
 }
 @-webkit-keyframes animatezoom {
 from {-webkit-transform: scale(0)}
 to {-webkit-transform: scale(1)}
 }

 @keyframes animatezoom {
 from {transform: scale(0)}
 to {transform: scale(1)}
 }
< /style>
< /head>
< body>
< button onclick="document.getElementById('servizi').style. display='block'" style="width:auto;">Continua</button>
< div id="servizi" class="modal">

<form class="modal-content animate" action="/testo.html">
<div class="imgcontainer">
<span onclick="document.getElementById('servizi').style. display='none'" class="close" title="Chiudi Finestra">&times;</span>
</div>
<div class="container">
<h2>Provavvvvv abkhblkwjhò òohj òo hdòohòodsh</h2>
</div>
</form>

Mi potete dire come posso coesistere questa pagina, Grazie
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Io sarò tonto per il caldo ma non ho capito una cippa di quello che vuoi fare!
Per me devi spiegare meglio il tuo intento e obiettivo!
Se ci fai vedere la pagina online forse capiamo anche meglio
 

muscaril

Utente Attivo
16 Mar 2009
46
0
6
I primi due codici sono la mia pagina htlm e il mio file css per lo style.
Ad un certo punto della mia pagina ho inserito il tasto continua, questo tasto dovrebbe aprire una pagina animata.
Il terzo codice che ho inserito è quello creato per far questo. Ma io non riesco ad associarlo alla mia pagina e al mio stile.
questo è tutto il codice di apertura pagina:
Codice:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

.container {
    padding: 16px;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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 */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

</style>
</head>
<body>
<button onClick="document.getElementById('servizi').style.display='block'" style="width:auto;">Continua</button>

<div id="servizi" class="modal">
 
  <form class="modal-content animate" action="/testo.html">
    <div class="imgcontainer">
      <span onClick="document.getElementById('servizi').style.display='none'" class="close" title="Chiudi Finestra">&times;</span>
      </div>
    <div class="container">
    <h2>Provavvvvv abkhblkwjhò òohj òo hdòohòodsh</h2>
   </div>
  </form>
</div>
</body>
</html>
 

muscaril

Utente Attivo
16 Mar 2009
46
0
6
Questa è la pagina:
Codice:
<!DOCTYPE html>
<html lang="it">
 <head>
  <meta charset="utf-8">

  <title>Prova</title>
<!--
-->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="">
  <meta name="description" content="">

  <!-- animate -->
  <link rel="stylesheet" href="css/animate.min.css">
  <!-- bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- font-awesome -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!-- google font -->
  <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,800' rel='stylesheet' type='text/css'>
  <!-- custom -->
  <link rel="stylesheet" href="css/style.css">

 </head>
 <body data-spy="scroll" data-offset="50" data-target=".navbar-collapse">
<!-- start servizi -->
        <div id="servizi" class="text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 wow bounce">
                        <h2>Di cosa ci occupiamo</h2>
                    </div>
                    <div class="col-sm-6 col-md-3 wow fadeInLeft" data-wow-delay="0.6s">
                        <div class="plan plan_one">
                            <h4 class="plan_title">ppp</h4>
                            <ul>
                                  <div align="left">pppppppp</div>
                            </ul>
                            <button class="btn btn-warning">Continua</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 wow fadeInUp" data-wow-delay="0.9s">
                        <div class="plan plan_two">
                            <h4 class="plan_title">ppp</h4>
                            <ul>
                                <div align="left">ppppp,.....</div>
                            </ul>
                            <button class="btn btn-warning">Continua</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 wow fadeInDown" data-wow-delay="1s">
                        <div class="plan plan_three">
                            <h4 class="plan_title">pppppp</h4>
                            <ul>
                                <div align="left">ppppp. .... </div>
                            </ul>
                            <button class="btn btn-warning">Continua</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 wow fadeInRight" data-wow-delay="1.3s">
                        <div class="plan plan_four">
                            <h4 class="plan_title">pppppp</h4>
                            <ul>
                                <div align="left">ppppp. ....</div>
                            </ul>
                            <button class="btn btn-warning">Continua</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end servizi -->
 <!-- jQuery -->
  <script src="js/jquery.js"></script>
  <!-- bootstrap -->
  <script src="js/bootstrap.min.js"></script>
  <!-- isotope -->
  <script src="js/isotope.js"></script>
  <!-- images loaded -->
    <script src="js/imagesloaded.min.js"></script>
    <!-- wow -->
  <script src="js/wow.min.js"></script>
  <!-- smoothScroll -->
  <script src="js/smoothscroll.js"></script>
  <!-- jquery flexslider -->
  <script src="js/jquery.flexslider.js"></script>
  <!-- custom -->
  <script src="js/custom.js"></script>

 </body>
</html>
 

muscaril

Utente Attivo
16 Mar 2009
46
0
6
Nessuno sa darmi una mano, lo so che sto cercando di associare due diverse pagine con diverse impostazioni. Ma non so come fare ad far avviare questa "model" di pagina
 

tess

Nuovo Utente
20 Dic 2017
47
4
8
34
FG
Semplicemente aggiungi il tag <a> al di fuori del testo "Continua", così:
Codice:
<button class="btn btn-warning"><a href="#">Continua</a></button>
Usa il tag <a> al posto del tag <button>, così:
Codice:
<a class="btn btn-warning" href="#" role="button">Continua</a>
 
Ultima modifica:

muscaril

Utente Attivo
16 Mar 2009
46
0
6
Salve Tess, grazie per il tuo suggerimento, ma così non mi funziona.
Dopo varie prove mi funziona con questo:
Codice:
<a href="#modalWindow" class="btn btn-warning">Continua</a>
</div>
        </div>
     <div id="box">
     <div id="modalWindow">
        <div>
            <a href="#close">Close modal</a><br>
            <p>
                vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
                <br><br>
              </p>
        </div>
        </div>
        </div>
è dentro il file stile ho questa modifica:
Codice:
        #box{
            margin:0 auto;
            width:80%;
            font-family: verdana,arial,sans-serif;
            font-size:16px;
        }
        #modalWindow {
            position: fixed;
            font-family: arial,helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.4);
            z-index: 99999;
            opacity:0;
            transition: opacity 400ms linear;
            pointer-events: none;
        }
        #modalWindow:target {
            opacity:1;
            pointer-events: auto;
        }
        #modalWindow > div {
            width: 400px;
            height: 240px;
            position: relative;
            margin: 10% auto;
            padding: 20px 20px 13px 20px;
            border: solid;
            border-color: black;
            border-width : 2px;
            background: #DAF7A6;
            border-radius: 10px;
        }
        #close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 85px;
    font-weight: bold;
}
        .close:hover,
        .close:focus {
    color: red;
    cursor: pointer;

Il problema adesso e che facendo questa impostazione mi sfalsa tutte le impostazioni dopo, mi cambia i riquadri, mi cambia le impaginazioni.

Cosa devo fare
 

tess

Nuovo Utente
20 Dic 2017
47
4
8
34
FG
Se ci sono id con lo stesso nome il codice CSS che viene dopo sovrascrive quello precedente, quindi devi cambiare il nome degli id...
 

tess

Nuovo Utente
20 Dic 2017
47
4
8
34
FG
Se il tuo codice si trova online, dacci l'indirizzo così possiamo aiutarti meglio...
 

muscaril

Utente Attivo
16 Mar 2009
46
0
6
Forse ho risolto così:
Codice:
#servizi .modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
#servizi .modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

#servizi .modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
#servizi .close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

#servizi .close:hover { background: #00d9ff;
}
mentre la pagina di apertura è:
Codice:
<!-- start servizi -->
        <div id="servizi" class="text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 wow bounce">
                        <h2>Di cosa ci occupiamo</h2>
                    </div>
                    <div class="col-sm-6 col-md-3 wow fadeInLeft" data-wow-delay="0.6s">
                        <div class="plan plan_one">
                            <h4 class="plan_title">Informatica</h4>
                            <ul>
                                  <div align="left">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</div>
                            </ul>
                            <a href="#openModal" class="btn btn-warning">Continua</a>
                    <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>Modal Box</h2>
                    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
                </div>
            </div>
        </div>
        </div>

Però adesso ho quest'altro problema, vi allego immagine:
upload_2018-8-12_12-52-41.png
 

Allegati

  • upload_2018-8-12_12-46-17.png
    upload_2018-8-12_12-46-17.png
    400,9 KB · Visite: 536

muscaril

Utente Attivo
16 Mar 2009
46
0
6
Nessuno mi sa indicare dove posso mettere qualche blocco all'impostazione del formato, quando si avviare il modul e poi ritornarlo come prima.
Il mio problema è questo, quando si avvia il modul rimane attivo le impostazioni della pagina con animazione del mouse e i riquadri.
Grazie
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
T [HTML] video in apertura sito. su pc ok, su smartphone KO HTML e CSS 0
G [HTML] Apertura PDF HTML e CSS 8
S apertura file html da sd in chrome Sviluppo app per Android 5
Z Flash bianco in apertura html HTML e CSS 0
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 3
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1
Z Mod_rewrite da HTML in PHP PHP 3
L Collegare un form html ad un database access Javascript 2
P HTML integrazione wordpress HTML e CSS 0
C [RISOLTO]Inserimento variabile php in input html PHP 20
L Eliminare estensione .html HTML e CSS 9
max1974 html in tooltip Javascript 0
C Risalire al php da html PHP 27
felino Esportare tabella HTML in PDF, quale libreria usare? Javascript 1

Discussioni simili