[HTML] Apertura Pagina

muscaril · 2018-08-05T21:37:28+0200

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 · 2018-08-05T22:29:31+0200

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 · 2018-08-05T23:05:08+0200

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 · 2018-08-05T23:11:52+0200

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 · 2018-08-06T22:24:35+0200

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

LinuxOhYeah · 2018-08-11T11:40:04+0200

Come giustamente dice Max 1

Max 1 ha scritto:
Se ci fai vedere la pagina online forse capiamo anche meglio

...anche io con il caldo ho meno capacità di capire

tess · 2018-08-11T12:38:36+0200

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>

muscaril · 2018-08-12T01:37:29+0200

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 · 2018-08-12T09:30:59+0200

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 · 2018-08-12T10:12:42+0200

Comunque se vuoi aprire un'altra pagina non devi usare le ancore...

muscaril · 2018-08-12T10:27:40+0200

In che senso scusa. Mi puoi dare altre soluzioni, grazie

tess · 2018-08-12T10:50:47+0200

Se il tuo codice si trova online, dacci l'indirizzo così possiamo aiutarti meglio...

tess · 2018-08-12T11:14:10+0200

Qui trovi la documentazione di Bootstrap per i modal:
https://getbootstrap.com/docs/4.1/components/modal/

muscaril · 2018-08-12T12:52:44+0200

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:

muscaril · 2018-08-14T10:08:55+0200

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

Cerca

Cerca

[HTML] Apertura Pagina

muscaril

Utente Attivo

Max 1

Super Moderatore

muscaril

Utente Attivo

muscaril

Utente Attivo

muscaril

Utente Attivo

LinuxOhYeah

Utente Attivo

tess

Nuovo Utente

muscaril

Utente Attivo

tess

Nuovo Utente

tess

Nuovo Utente

muscaril

Utente Attivo

tess

Nuovo Utente

tess

Nuovo Utente

muscaril

Utente Attivo

Allegati

muscaril

Utente Attivo

Discussioni simili