|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
| autor |
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
08.06.2010 02:20:50
jquery modal window |
|
|
kuidas teha nii, et klikkides lingile tuleb overlay ja siis mingi etteantud suurusega aken, milles avaneb teine url... aga seal aknas peab saama surfata nagu oleks tegu tavalise popupiga, kuni vajutada sulge nuppu või linki... peale sulgemist peab parent ennast refreshima!
keegi aru üldse sai mida ma taga ajan? ma selles teemas võhik...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
   |
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
 |
inzinz
HV kasutaja
liitunud: 26.01.2005
|
|
08.06.2010 08:10:50
|
|
|
Jup, tegu tavalise modal asjaga. Googles näiteid ja valmis tehtud asju palju, aga üldine teooria on selline, et see modal asja lahti võttev javascripti funktsioon esmalt sisestab body elemendi lõppu selle poolläbipaistva layeri, mida saab teha nii:
$('body').append('<div id="modal-layer"></div>');
Stiil on miskit taolist:
#modal-layer {
position:absolute;
background:#000;
left:0;
top:0;
bottom:0;
right:0;
z-index:1000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
} |
See siis tekitab poolläbipaistva layouti kõikide muude asjade peale mis on ilusti äärest ääreni.
Selle keskse vaate saad teha <iframe src="aadress"></iframe> elemendiga. Näiteks $('body').append('<div id="popup-container"><div id="popup-title">Pealkiri<div id="popup-close" onclick="closepopup()"></div></div><iframe frameborder="0" width="500" height="400" src="http://www.neti.ee/"></iframe></div>');
closepopup teeb midagi taolist: $('#popup-container').remove();$('#modal-layer').remove();document.location.reload();//reloadi tahtsid teha peale sulgemist
Lisaks on vaja sellist stiili:
#popup-container {
position:absolute;
width:500px;
z-index:1000;/*z-index peab olema suurem kui modal-layeri oma*/
left:300px;
top:200px;
}
#popup-title {
width:500px;
text-align:left;/*muu pealkirja stiil*/
}
#popup-close {
float:right;
width:20px;
height:20px;
background:url(kuvatava 20x20 sulgemise nupu aadress) no-repeat;
} |
Muidugi sa saad kohe peale popup-container lehele sisestamist teha ka erinevaid mõõtmisi ja arvutusi et paigutada avanenud popup ala korrektselt keskele: $('#popup-container').css('left', Math.floor(($(document).width()-$('#popup-container').width())/2)+'px');
Õppimise mõttes on huvitav ise proovida järgi katsetada, aga kui asjaga kiire, siis miski olemasolev asi google otsingutulemustest võttes on palju kiirem ja rohkem läbi testitud variant.
_________________
Upload.ee - eestimaine failiupload |
|
| Kommentaarid: 4 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
4 |
|
| tagasi üles |
|
|
kullar
HV kasutaja
liitunud: 26.11.2006
|
|
| Kommentaarid: 27 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
25 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.06.2010 09:43:37
|
|
|
ma seda thickboxi proovisin, kuid niikui kuhugi lingile klikkisin, kadus see modal ära ja kogu browser suunati sinna uuele lingile...
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.06.2010 09:54:25
|
|
|
inzinz,
ma ei saa su näidetest absull aru. kuhu ma selle jquery scripti panema pean?
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
Renka
HV Guru
liitunud: 01.04.2002
|
|
08.06.2010 11:07:59
|
|
|
Paned avaneva akna sisuks iframe ja sellele annad vastava URLi ette? Muudmoodi nagu ei saa ju suvalist lehte brausida.
_________________
There is no place like 127.0.0.1 |
|
| Kommentaarid: 71 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
1 :: |
61 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.06.2010 11:11:26
|
|
|
Renka no see tõmbab divi modalisse... tahan nii, et seal modalis avaneks uus fail.php ja kui ma seal fail.php -s mingile lingile klikin, siis see link avaneb seal samas modalis...
EDIT: KRT RENKA SIIN MUUDAB OMA POSTE
oot, kas sinna div sisse iframe?
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
Renka
HV Guru
liitunud: 01.04.2002
|
|
08.06.2010 11:13:46
|
|
|
keevitaja, divi sisse iframe jah. nii saad suvalises veebis tingi surfata.
Kui tahad oma saidi siseselt siis tuleks ehk ajaxiga lahendus natuke viisakam.
_________________
There is no place like 127.0.0.1 |
|
| Kommentaarid: 71 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
1 :: |
61 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.06.2010 11:26:18
|
|
|
vaja jah oma saidi siseselt... ehk siis uploadi aken, millele saab kaasa anda eri parameetreid ja erinevatel lehtedel vaja teda välja kutsuda.
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.06.2010 11:32:22
|
|
|
aga kuidas sellist asja teha, et kui vaja formiga mingi string sisestada. ok, saan panna selle formi divi sisse, kuid seda stringi peab ka php abil kontrollima, et ta näiteks tühi ei ole või ei sisalde keelatud märke ja siis errori kuvama. kas seda saab kah ainult iframega teha?
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.06.2010 21:01:13
|
|
|
link :: thickbox hack
leidsin ideaalse lahenduse...
http://jquery.com/demo/thickbox/
seal thickbox.js failis tuleb ära häkkida funktsioon: function tb_remove()
esimise reana funktsiooni sisse kirjutada
| parent.location.reload(1); |
| javascript:
|
function tb_remove() { parent.location.reload(1); $("#TB_imageOff").unbind("click"); $("#TB_closeWindowButton").unbind("click"); $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();}); $("#TB_load").remove(); if (typeof document.body.style.maxHeight == "undefined") {//if IE 6 $("body","html").css({height: "auto", width: "auto"}); $("html").css("overflow",""); } document.onkeydown = ""; document.onkeyup = ""; return false; }
|
ja nüüd iga kord kui modal window suletakse, siis refreshitakse parent. muideks selleks, et iframe välja modalis kutsuda, piisab lingist:
<a href="proov.php?id=see_on_id&keepThis=true&TB_iframe=true&height=250&width=400" title="see on test" class="thickbox">testime...</a>
|
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
kullar
HV kasutaja
liitunud: 26.11.2006
|
|
| Kommentaarid: 27 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
25 |
|
| tagasi üles |
|
|
Renka
HV Guru
liitunud: 01.04.2002
|
|
09.06.2010 00:15:47
|
|
|
No enamustele jquery pluginatele on võimalik ju ka eventi peale miskit koodi jooksutada (callback) ja ei pea midagi häkkima.   Näiteks onClose vmt
_________________
There is no place like 127.0.0.1 |
|
| Kommentaarid: 71 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
1 :: |
61 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
09.06.2010 09:30:30
|
|
|
| kullar kirjutas: |
| fancyboxile oli see iframe asi ju kohe sisse ehitatud ja ei vajanud mingit hacki. |
ok, ma uurin seda asja kah. ma pole ennem nendega kokku puutunud ja teadmised hetkel 0
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
09.06.2010 19:43:29
|
|
|
kullar, kuidas sellel fancyboxil saab panna parenti reloadima kui modal iframe suletakse?
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
Renka
HV Guru
liitunud: 01.04.2002
|
|
09.06.2010 19:50:39
|
|
|
keevitaja, onClosed callback on ju olemas.
| javascript:
|
$("#selector").fancybox({ onClosed : function() { // kood mida kasti sulgemisel käivitada // Näiteks sulle sobib vist: parent.location.reload(1); } });
|
_________________
There is no place like 127.0.0.1 |
|
| Kommentaarid: 71 loe/lisa |
Kasutajad arvavad: |
|
:: |
2 :: |
1 :: |
61 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
10.06.2010 22:26:26
|
|
|
teen edusamme 
aga ei saa iframe width ja height paika. kui panen 'width' : '300', siis tehakse modal pikem kui mu browseri aken on. mis valesti on? tahaks nagu 300 pixlit pikkuseks!
| html:
|
<?php session_start(); $_SESSION['kala']++; ?> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <link rel="stylesheet" href="style.css" /> $(document).ready(function() { $("#upload").fancybox({ 'width' : '30%', 'height' : '60%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe', 'onClosed' : function() { parent.location.reload(1); } }); }); </script> </head> <?php echo $_SESSION['kala']; ?><br> <a id="upload" href="upload.php">upload </a> </body> </html>
|
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
neros
HV Guru
liitunud: 26.11.2003
|
|
13.06.2010 10:12:52
|
|
|
300? mida? pikslit? m tähemärki? ekraanikõrgust?
pane lihtsalt "px" lõppu and you're golden 
_________________
GitHub
.NET Core & Azure baasil lahendused ja arhitektuur - kontakt. |
|
| Kommentaarid: 48 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
40 |
|
| tagasi üles |
|
|
Le Inc
HV Guru
liitunud: 06.09.2002
|
|
08.02.2011 19:18:40
|
|
|
Kuidagi ei saa jqueris .dialog akent välja kutsuda klikkides pildile! Button'iga töötab kenasti, seega ei tohiks jquery koodis viga olla.
Ehk mul on pildike mille klõpsamise peale peaks jquery modal aken välja hüppama. Ühest näitest jäi silma <a id="modal_ava" href="#">Kliki</a> mis peaks teoorias olema sama mis <button id="modal_ava"> ?
Või saab kuidagi <a href="javascript:TuleVälja();"> stiilis teha? 
|
|
| Kommentaarid: 56 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
54 |
|
| tagasi üles |
|
|
keevitaja
AM 10 aastat
liitunud: 05.11.2001
|
|
08.02.2011 21:28:59
|
|
|
näita koodi.
jquery-ui on hea lihtne
_________________
Hinnavaatlus ei ole koht arvamuse avaldamiseks! |
|
| Kommentaarid: 51 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
3 :: |
40 |
|
| tagasi üles |
|
|
|
:: KKK
:: otsing 
:: statistika
:: kasutajate nimekiri
:: kasutajate grupid
:: registreeri
teata moderaatorile
