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.

12 Responses to “Javascript la colț de stradă: cum faci un popup simplu?”

  1. Deocamdată e o limbă străină pentru mine, dar sper să vină ziua-n care o să vorbim aceeași limbă.
    Poate vrei să-nveți olandeza?! 😛

  2. Salut vreau sa fac pe blogul meu ceva de genul :
    o poza cu titlul fallow me pus deasupra ei iar cand voi da click pe poza sa fiu redirectionat catre o pagina de facebook/twitter/etc + catre alt site

    • Manuel Cheta 15. Jun, 2015 at 07:43

      Nici nu iti trebuie javascript pentru aia.

      Trebuie sa pui ceva de genul:
      cod:

      Follow me:
      <a href="link-pagina" target="_blank" rel="nofollow">
      <img src="link-imagine" />
      </a>

      De mai sus:
      – link pagina este linkul catre site-ul dorit
      – link imagine – link catre imaginea in sine

  3. am incercat acest cod dar nu functioneaza.
    la accesarea link-ului sunt redirectionat catre top pagina si la adresa de adauga un #

    • Manuel Cheta 23. Aug, 2015 at 19:41

      Vad o eroare de js acolo:
      Uncaught TypeError: $ is not a function

      Incearca sa folosesti codul asta de js:

      <script>
        (function($) {
                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");
            });
        }(jQuery)
      </script>
      

      • aceiasi problema, cred ca e de la mine din site.. 🙁

        • Manuel Cheta 24. Aug, 2015 at 08:37

          Vezi că js-ul merge. E de la codul CSS pentru #popupchart.

          Folosește codul ăsta și ar trebui să meargă numai bine:
          #popupchart {
          display: none;
          width: 500px;
          height: auto;
          position: absolute;
          top: 30px;
          left: -271px;
          z-index: 1000;
          border: solid 1px #CCC;
          background: #FFF;
          padding: 30px;
          box-shadow: 0px 1px 15px #CCC;
          }

Trackbacks/Pingbacks

  1. 2014 pentru obișnuit.eu/manuelcheta.ro | Manuel Cheța - 30. Jun, 2018

    […] și ce a făcut Bogdan Ivănescu cu emisiunea Dr. MIT. Prin perioada aceasta am început să scriu despre javascript și mă rățoiam la […]