Un alt tutorial “how to”, să învăţăm să facem lucruri simple fără să apelăm la pluginuri consumatoare de resurse.
Implementarea unui script de pop-up window pe blogul tău se face în trei paşi deosebit de simpli.
Pasul 1:
Codul de mai jos este un cod javascript care se copiază cu copy/paste în head-ul siteului între tagurile <head> şi </head> indiferent că avem un site simplu în HTML sau platforma WordPress.
În cazul WordPress codul trebuie copiat în fila header.php din folderul temei, prin editare în wp-admin/Appearance/Editor, sau editarea separat cu notepad şi upload (owerwritte) pe server pentru cei mai experientaţi care folosesc curent un program FTP Uploader.
Deci copy/paste pe un rând gol imediat deasupra </head>
<script language='javascript'>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=430, height=530, left=300, top=50');");
}
</script>
Se pot edita/modifica următorii parametrii:
• width=430 (lăţime fereastră pop-up)
• height=530 (înălţime fereastra pop-up)
• left=300 (poziţia faţă de margine stânga ecran în pixeli unde să apară)
• top=50 (poziţia faţă de margine sus ecran în pixeli unde să apară)
Pasul 2:
Pop-up window-ul respectiv trebuie să se deschida atunci când dau click pe un link text sau poză cu link. Indiferent de unde, din post, din sidebar, etc.
În loc de un link normal link-ul text (în caz de text) trebuie scris în felul următor:
<a href="javascript:popUp('http://www.site.ro/folder/document.html')">Click aici</a>
Se configurează:
• nume document.html (poate fi şi .php), DOCUMENTUL DIN CARE ESTE CONSTITUIT POP-UP-UL propriu-zis
• folder, numele folderului unde se află documentul
• Dacă am nevoie de o simplă poză care să se deschidă în pop-up, nu mai am nevoie de nici un document, în loc de document.html scriu direct numepoza.jpg , dar trebuie corelată dimensiunea pop-up-ului (la pasul 1) cu dimensiunea în pixeli a pozei. (să nu fie fereastra mai mică decât poza).
Pasul 3:
Crearea documentul .html sau .php din care este constituit pop-up-ul.
Dau un exemplu simplu mai jos, se poate edita cu notepad şi se salvează cu numele document.html sau document.php
• În cazul salvării acestuia ca document.html documentul nu se mai poate deschide ulterior cu notepad pentru o eventuală modificare ulterioară, doar cu un program editor html. Odată creat documentul, se urcă pe server la locul dorit.
Mai jos, exemplu de document pentru pop-up, se schimbă conţinutul în funcţie de necesităţi: (normal asta necesită abilităţi de webdeveloper dar dacă aveti nevoie de ceva simplu nu cred că nu vă daţi seama ce trebuie schimbat)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Titlu Pop-Up Window care apare sus in Title bar</title>
</head>
<body>
<h2>Acesta este un Pop-Up Window</h2>
<br><br>
<h3>Text</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>Pellentesque facilisis iaculis molestie.
<br>Nullam non justo quis leo accumsan rutrum a non nisl.
<br><br>
<h3>Imagine</h3>
<a href="http://www.blogwidget.ro/" target="_blank" title="Un widget cool pentru blogul tau!"><img src="http://www.blogwidget.ro/wp-banners/bwr125_new.png" border="0" alt="Un widget cool pentru blogul tau!"></a>
</body>
</html>
Test:
Click aici, testează Pop-Up Window
