Carli - ilraC

Prijazni popup

Sej verjetno poznate tistega baw bawa, ki se ga vsi tako bojijo ali pa iz njega počnejo celo znanost, pri odpiranju oken, potem tukaj nastopi še kakšna znanost, kako pretentati blokiranje popup oken, ali pa kakšna znanost pri odpiranju lightbox, graybox, ali kakšnih drugih oken. No stvar je res povsem preprosta z uporabo jquerya. Gre samo za prikazovanje skritih delov HTML kode in nič drugega.

Kot rečeno gre za to, da se prikaže del kode, ki naj bi se drugače odprl v popup oknu, tukaj pa se odpre kar na strani in pogled se avtomatično fokusira s pomočjo zatemnjenega-prosojnega ozadja. Kako do tega?

Najprej nastavimo določeno html kodo, pa da ne bomo spreminjali že obstoječe kode, lahko samo wrapamo celotno kodo v nek div, pa naj bo to div, ki ima id=okno. To izgleda nekako tako:

<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<th bgcolor="#99CC00">Ime:</th>
<th bgcolor="#99CC00">Priimek:</th>
</tr>
<tr>
<td>Franci</td>
<td>Pomagej</td>
</tr>
</table>

Da pa vse to wrapamo v en div, kot smo rekli zgoraj in zraven dodamo še en div, ki bo predstavljal naše zatemnjeno ozadje, pa to izgleda nekako takole:

<div id="bg" style="display:none;"></div>
<div id="okno" class="okno" style="display:none;">
<div style="position:absolute; right:-10px; top:-10px;"><a href="#" onclick="zapri();"><img src="close.png" border="0" /></a></div>
<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<th bgcolor="#99CC00">Ime:</th>
<th bgcolor="#99CC00">Priimek:</th>
</tr>
<tr>
<td>Franci</td>
<td>Pomagej</td>
</tr>
</table>
&lt;/div&gt;

Zgoraj je dodan še gumb za zapiranje okna, ki pa bo imel na koncu enako funkcijo, kot klik na zatemnjeno ozadje.

V inline css nastavimo display:none;, kar skrije obstoječo html kodo in jo ne rendra v brskalniku. Ostal css izgleda nekako tako:

#okno {
background-color: #333333;
border: 1px solid #FFFFFF;
height: 300px;
width: 300px;
padding: 5px;
}
#bg {
background-color: #000000;
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
}

Pozicija odprtega okna je tako odvisna od vas, v spodnjem primeru je primer kode, ki pozicionira okno na sredino brskalnika, to stori tako, da s pomočjo javascripta prebere višino in širino brskalnika, posamezno vrednost deli z dva in odšteje vrednosti, tako dobimo absolutne odmike od zgornjega in levega robu brskalnika in vrednosti nastavimo v css.

Samo odpiranje oken je še enostavnejše, saj se lahko uporabi toggle, show, fadeIn, itd. efekti, ki jih podpira jQuery. Sledeča javascript koda izgleda nekako takole:

function centriranje(){
$("#okno").css({
"position": "absolute",
"top": document.documentElement.clientHeight/2-$("#okno").height()/2,
"left": document.documentElement.clientWidth/2-$("#okno").width()/2
});
$("#bg").css({
"opacity": "0.7"
});

}
function prikazi(){
centriranje();
$('#bg').fadeIn(function () {
$('#okno').fadeIn("slow");
});

$('#bg').click(function () {
zapri();
});

}
function zapri() {
$('#okno').fadeOut(function () {
$('#bg').fadeOut();
});
}

V zgornjem primeru, se odpiranje izvaja tako, da se najprej odpre ozadje, ko je to odprto, se izvede odpiranje okna, pri zapiranju, pa je postopek obraten.

Primer: xopen

Rešitev za IE6:

$("#bg").css({
"opacity": "0.7",
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
});

Pri nastavljanju opacity dodate še točno višino in širino overlaya. Opacity pa lahko nastavite tudi kar v CSS datoteki.

Tagi: JavaScript, jQuery, odpiranje, okna, strani

3 x komentiran Prijazni popup

Komentiraj ...