Javascript la colț de stradă: cum faci un popup simplu?

Cum lucrez în Forumul Bigcommerce în ultima perioadă, am ocazia să învăț și să aplic micile lecții ce țin de HTML/CSS/Javascript. De data aceasta voi copia aici codul la care am lucrat pentru a face un popup simplu, numit și fereastră popup ori fereastră modală (modal window).

Ca idee, trebuie să ai următoarele elemente:
– un trigger – ceva care face ca acel popup să apară sau să dispară = poate fi un click pe un element, altă acțiune sau un time delay
– un div cu ceva conținut = aici pui cod html cu text, imagini, video, whatever
– CSS care va defini stilurile, clasele, id-urile folosite = cu ajutorul lor vom „desena” fereastra popup
– codul Javascript folosit pentru a crea diverse acțiuni după ce triggerul a fost activat = ceva linii de cod care afișează/ascund popup-ul

Nu voi intra în multe detalii, ci voi trece la afișarea codurilor. Dacă vrei să știi mai multe ori ai corecturi de făcut, zona de comentarii este a ta.

Inițial stabilim regulile CSS folosite pentru crearea ferestrei popup. Vom crea un popup ce va apărea după ce dăm click pe un link anume. Cu un click înapoi pe link sau în interiorul popup-ului vom închide ferestra modală.

<style>
        
        .mclink {
        position: relative;
  
        }
#popupchart {
display: none;
width: 400px;
height: auto;
position: absolute;
top: 20px;
left: 0;
z-index: 1000;
border: solid 1px #ccc;
background: #fff;
padding: 30px;
box-shadow: 0px 1px 15px #ccc;
                    }
</style>

Vei vedea că am folosit o clasă .mclink care are position: relative. MCLINK este div-ul ce va conține fereastra popup și are position: relative pentru că elementele popup au nevoie de o poziție absolută, vezi position: absolute pentru #popupchart.

Elementul cu poziție absolută se relaționează la părintele cel mai apropiat ce are position: relative. Așadar, de vreme ce #popupchart este în .mclink, este clar că eu pot stabili poziția lui în funcție de .mclink.

Legat de #popupchart, el este inițial ascuns cu display: none. apoi îl vom afișa și ascunde din nou cu Javascript.

Acum ajungem la partea de Javascript, mai precis la partea în care folosim una dintre librăriile Javascript numită jQuery:

<script>
      
function showpopchart(){
                            
if ( $("#popupchart").hasClass("popupshow") ) {  
$("#popupchart").hide();
$("#popupchart").removeClass("popupshow"); 
}
else {
$("#popupchart").show();
$("#popupchart").addClass("popupshow"); 
}
        
        
        
};

      
    };    

$(" #popupchart ").click(function(){
$(this).hide();
$(this).removeClass("popupshow"); 
});
        
   </script>

Ce face codul de mai sus? Funcția:
– showpopchart() – are grijă să afișeze #popupchart și să îi adauge clasa popupshow acelui div. dacă această funcție vede clasa respectivă în div, atunci știe că va trebui să aplice hide() pentru a ascunde acest div.
– $(” #popupchart „).click(function() – această funcție anonimă va avea deja triggerul inclus (click) și va face un lucru: când dai click în interiorul #popupchart acest popup va fi ascuns.

Vei întreba unde este triggerul pentru prima funcție. Ei bine, el este mai jos:

<a onclick="showpopchart();  return false;" href="#">Click for content</a>

Onclick este triggerul atașat linkului care zice „Click for content”. „return false;” semnifică blocarea acțiunii default a elementului <a>. Adică, dacă dai click pe un link, browserul trebuie să te ducă undeva. „return false;” zice browserului să ignore funcția primară a linkului. Simple as that!

Acum, mai avem nevoie de popup-ul efectiv:

<div class="mclink">

    <a onclick="showpopchart();  return false;" href="#">Click for content</a>

    <div id="popupchart">
        Some content in here
    </div>

</div>

După cum vezi, totul este în .mclink, după care avem triggerul în acel link, apoi conținutul propriu-zis.

Mai jos este întreg codul:

<style>
        
        .mclink {
        position: relative;
  
        }
#popupchart {
display: none;
width: 400px;
height: auto;
position: absolute;
top: 20px;
left: 0;
z-index: 1000;
border: solid 1px #ccc;
background: #fff;
padding: 30px;
box-shadow: 0px 1px 15px #ccc;
                    }
</style>

<script>
      
function showpopchart(){
                            
if ( $("#popupchart").hasClass("popupshow") ) {  
$("#popupchart").hide();
$("#popupchart").removeClass("popupshow"); 
}
else {
$("#popupchart").show();
$("#popupchart").addClass("popupshow"); 
}
        
        
        
};

      
      

$(" #popupchart ").click(function(){
$(this).hide();
$(this).removeClass("popupshow"); 
});
        
   </script>


<div class="mclink">
  <a onclick="showpopchart();  return false;" href="#">Click for content</a>

    <div id="popupchart">
        Some content in here
    </div>

</div>

Iar mai jos vedem cum funcționează pe viu:

Întrebări, sugestii? Merită văzută și mica mea joacă în javascript + corecturile făcute de Radu data trecută AICI.