Mielenkiintoinen aihe minusta, koska tulevaisuudessa tunnutaan menevän siihen, että PopUp ikkunat hävitetään vaikka sitten väkisin. Toki ne aiheuttavat paljon harmia, mutta oikein käytettynä ne ovat hyviä sekä käteviä. Sovellukset vain eivät välitä siitä, että onko niiden tarkoitus hyvä vai ei eli menee tavallaan lapsi pesuveden mukana.
Ongelma siis: ylläpidän järjestelmää jossa tietoa esitetään myös popup ikkunoilla käyttäjän pyynnöstä (click ja avautuu). Nyt tällä hetkellä esim. Norton Internet Security jo estää popup ikkunat ja samalla estää koko sivuston käytön, koska se tunnistaa JavaScript tiedoston. Ei hyvä siis.
Olisiko kenelläkään mitään muuta hyvää keinoa jolla voitaisiin tietoa esittää kätevästi muuttuvan kokoisella ikkunalla tai vastaavalla. Järjestelmäni käyttää popup ikkunoita esim. suuremman valokuvan esittämisessä thumbnail kuvasta ja sitten ihan vain lisäinfoa jostain hakujutusta. Vaatimuksena toimivuus kaikilla selaimilla ja alustoilla.
Hieman hämmästynyt, koska XP SP2 sisältää tuon popup blokkerin myös ja se on siinä vakiona päällä. Selitä sitten tuhansille käyttäjille, että se M$ tekee sitä ja tätä...
CSS:llä ja PHP:lla. Teet divin (position: absolute), jolle annat tarpeeksi korkean z-index - arvon. PHP:n include-funktiolla sitten latailet sinne sisältöä. Kokoa ja sijaintia voit muuttaa oman maun mukaan. Eri linkeistä voi luonnollisesti aueta erikokoisia divejä ja voitpas tehdä niistä jopa normaalin popup-ikkunan näköisiä, jos niin haluat. Nurkkaan vain ruksi, josta ikkuna sitten suljetaan (tapa vapaa, esimerkiksi <a href='sivu.php?win=3&show=false'>x</a>).
Ja tästä oli opas jossakin?
Mihin kohtaan tarvitset apua?
Menee hieman offtopic, mutta:
Miten hyvin iframet toimivat eri selaimilla? Paremmin varmaan kuin pop-upit?
Mulla on yks kuvagalleria, jonka selaus perustuu aika pitkälti js + popup. Tiedän systeemin olevan aika syvältä, mutta toistaiseksi se ei haittaa, koska galleria ei ole missään suuren yleisön nähtävillä. Kuvien selailu perus-ulkoasussa on turhan raskasta. Ajattelin vaihta popup => iframe, jolloin kuvien selailu tapahtuisi käyttäjän kannalta perus-ulkoasussa, mutta en ole frameja oikeen ikinä käyttänyt ja en tiedä miten ne sitten toimivat eri selaimilla.
Tein lyhyen esimerkin tuosta mainitsemastani tavasta. Erittäin pelkistetty ja kökkö, mutta idean ymmärtänee. Esimerkkisivu ja lähdekoodi:
<html>
<head>
<style type='text/css'>
<!--
#popup {
position: absolute;
top: 100px;
left: 240px;
width: 200px;
border: solid #888 8px;
background: #eee;
z-index: 10;
}
div.top {
height: 20px;
text-align: right;
border-bottom: solid #888 4px;
background: #f6f6f6;
}
div.bottom {
height: 300px;
padding: 10px;
overflow: auto;
}
div.top span {
border-left: solid #888 4px;
padding: 5px;
}
-->
</style>
</head>
<body>
<p><a href="<?php print $_SERVER['PHP_SELF'];?>?show=true">avaa popup</a></p>
<p>
<?php include("../lorem.txt");?>
</p>
<?php
if(isset($_GET['show']) && $_GET['show']=="true") {
print "<div id='popup'>";
print "<div class='top'><span><a href='".$_SERVER['PHP_SELF']."?show=false'>X</a></span></div>";
print "<div class='bottom'>";
include("../lorem.txt");
print "</div>";
print "</div>";
} // if
?>
</body>
</html>Edit: Ja jos haluaa hienostella, jollain kevyellä JS-kökkäreellä saa ikkunaa myös raahattua, en kuitenkaan nyt ehdi moista tuohon lisätä kun pitää syöksyä töihin :)
Tässäkö se kevyt kikkare on?
<script type='text/javascript'>
<!--
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if(over) {
if(N) {
ob = document.getElementById("popup");
X=e.layerX;
Y=e.layerY;
return false;
} else {
ob = document.getElementById("popup");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
} // else
} // if
} // funktio
function MM(e) {
if(ob) {
if(N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
} else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
} // else
} // if
} // funktio
function MU() {
ob = null;
} // funktio
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
} // if
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
-->
</script>Jep, siinähän se. Ei tosin omaa käsialaa, Googlettamalla löysin ja hieman sovelsin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.