[Javascript]Aprire div con click e chiuderlo con altro pulsante

Discussione in 'Javascript' iniziata da lazlo, 11 Ottobre 2018.

  1. lazlo

    lazlo Nuovo Utente

    Registrato:
    24 Gennaio 2018
    Messaggi:
    16
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Salve ragazzi, spero di aver postato nella sezione giusta. Ho provato a fare una ricerca, ma non sono riuscito a trovare la soluzione al mio problema.
    In pratica ho creato un div quadrato che metterò nell'angolo di una mia pagina web, e un altro div che conterrà delle informazioni e che ora, in base alle regole css è nascosto. Innanzitutto il primo div quadrato sarà un pulsante cliccabile, per cui non so se ho fatto bene a crearlo appunto come div piuttosto che usare un altro tag, ad esempio il tag a. Quello che vorrei fare io tramite javascript è far aprire il div nascosto andandogli ad assegnare una classe che sovrascrive le regole css attuali, tutto questo cliccando sul primo div.
    Una volta che si è aperto il div nascosto, che occuperà tutta la larghezza del monitor, sempre in alto a destra ci sarà un altro pulsante che, premendolo, dovrà togliere la classe precedentemente aggiunta dall'altro pulsante in modo da far tornare nascosto il div principale. Non so se sono riuscito ad essere sufficientemente chiaro. Per farvi capire meglio, vi allego un codice provvisorio che ho scritto:

    HTML:
    <head>
<style>
#mainbox{
display:flex;
width:1%;
height:1%;
background:red;
position:fixed;
top:-100px;
left:-100px;
}

.mainbox-show{
width:100% !important;
height:100% !important;
top:0 !important;
left:0 !important;
}

#open{
position:fixed;
width:50px;
height:50px;
display:flex;
background:yellow;
top:10px;
right:10px;
cursor:pointer;
text-align:center;
}

.close{
display:flex;
width:40px;
height:40px;
background:green;
position:relative;
top:0;
right:0;
cursor:pointer;
}
</style>
</head>

<body>
<div id="open"></div>
<div id="mainbox">prova
<div class="close"></div></div>
</body>
    Quello che vorrei fare è creare appunto uno script javascript che, quando premo sul div con id open vada ad aggiungere al div mainbox la classe mainbox-show. Poi, quando andrò a cliccare sul div close presente all'interno del div mainbox, la classe mainbox-show dovrà essere rimossa per tornare a nascondere il div mainbox. Ho provato diverse combinazioni ma non sono riuscito a venirne a capo. Qualcuno può aiutarmi?
     
    lazlo, 11 Ottobre 2018
    #1
  3. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    740
    Mi Piace Ricevuti:
    39
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    utilizzando JQuery...
    Codice:
    <button id="apri">Apri</button>
<button id="chiudi">Chiudi</button>
<script>
$(document).ready(function(){
     $('#apri').on('click',function(){
       $('#mainbox').addClass('mainbox-show');
});
$('#chiudi').on('click',function(){
       $('#mainbox').removeClass('mainbox-show');
});
});

</script>
     
    macus_adi, 19 Ottobre 2018
    #2
  4. lazlo

    lazlo Nuovo Utente

    Registrato:
    24 Gennaio 2018
    Messaggi:
    16
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Grazie mille
     
    lazlo, 20 Ottobre 2018
    #3
Sto caricando...
Discussioni simili - [Javascript]Aprire div click
  1. guliver

    [javaScript]Aprire file Word

    guliver, 29 Aprile 2008, nel forum: Javascript
    Risposte:
    1
    Visite:
    2.300
    lukeonweb
    30 Aprile 2008
  2. guliver

    [javaScript]Aprire file Excel in un'altra pagina

    guliver, 17 Aprile 2008, nel forum: Javascript
    Risposte:
    1
    Visite:
    4.927
    lukeonweb
    6 Maggio 2008
  3. Giacomo Boccherini

    [HTML] il div non si ottimizza

    Giacomo Boccherini, 21 Marzo 2019 alle 11:31, nel forum: HTML e CSS
    Risposte:
    1
    Visite:
    53
    Max 1
    21 Marzo 2019 alle 15:53
  4. iucaa

    [PHP] Immagini caricate su server diverse da quelle mostrate

    iucaa, 12 Marzo 2019, nel forum: PHP
    Risposte:
    4
    Visite:
    101
    macus_adi
    17 Marzo 2019 alle 07:31
  5. Marcolino92

    Condividere su FB con redirect

    Marcolino92, 12 Marzo 2019, nel forum: Facebook
    Risposte:
    0
    Visite:
    58
    Marcolino92
    12 Marzo 2019

Condividi questa Pagina