[JS/CSS] Pagina faden en onklikbaar maken

[Reveller]

Bij Vox (de nieuwe blogging service van SixApart) hebben ze een geavanceerde editor, welke niet met popups werkt, maar met divjes voor schermen waar bijvoorbeeld een url link aangemaakt kan worden. Als zo'n div-popup opent, wordt de inhoud van de pagina gefade en geblokkeerd voor gebruik. Een voorbeeld:



Als ik nu op het knopje klik om een link aan te maken, ziet het scherm er zo uit:



Je kunt nu nergens meer klikken op de pagina behalve in het "popupje". Mijn vraag is hoe ze dit bewerkstelligen. Ik heb geprobeerd hun source te lezen, maar dat is welhaast onmogelijk. Ik neem aan dat ze gewoon een div laden met achtergrondkleur wit en een bepaalde opacity. Wat ik me wel afvraag is dit: als ik naam beneden scroll, is de pagina ook daar "gefade" naar wit en onklikbaar. Hoe maak ik een div die precies zo lang is als een ingeladen pagina?!

[BasieP]

divje 100% maken en over alles heen plakken, in het divje zet je een deels transparante background,..
je popupje kan je dan weer in die div plaatsen, zodat ie niet 'onklikbaar' is

[Fuzzillogic]

De dojo-toolkit heeft voor dit soort forms wel kant-en-klaar oplossingen. Maar helaas verkrachten dit soort grappen en grollen de toegankelijkheid van een pagina. Zonder javascript werkt het al helemaal niet, en persoonlijk vind ik dojo irritant traag.

Voor intranet gelden deze nadelen niet altijd, dus daar kun je het vaak wel voor gebruiken.

[Reveller]

Ik ben wat aan het prutsen geweest, en onderstaande test werkt in ieder geval. Elegant is anders, maar het principe staat er. @Nexxennium: als javascript niet ondersteund wordt, wil ik sowieso geen editor maar slechts een textarea weergeven

HTML:

<script>
function fadePage() {
  var div = document.createElement('div');
  div.style.left = 0;
  div.style.top = 0;
  div.style.width = '100%';
  div.style.height = '100%';
  div.style.position = 'absolute';
  div.style.background = '#fff';
  div.style.opacity = '.5';
  div.style.filter = 'alpha(opacity=50)';
  
  document.body.appendChild(div);
}

function createPopUp(divId) {
  fadePage();

  var div = document.getElementById(divId);
  div.style.left = 220;
  div.style.top = 220;
  div.style.position = 'absolute';
  div.style.visibility = 'visible';
  
  document.body.appendChild(div);
  
}
</script>

<input type="button" onclick="createPopUp('test')">

<div id="test" style="visibility: hidden;">
  Dit is test content met een <input type="button" value="button!">
</div>

[Verwijderd]

Beetje een halve oplossing natuurlijk, aangezien er geen enkele reden is om de stijl dynamisch in te stellen. Daar heb je nou stylesheets voor.

[Reveller]

@Cheatah - nu aangepast mbv css. Hoop dat het nu netjes is Ik heb alleen 1 probleem: hoe kan ik ervoor zorgen dat de popup-div realtime opschuift (en dus in het midden van de pagina blijft) als ik de browser resize? Hoe kan ik een onresize actie meegeven die realtime de top en left positie van de popup verandert?

HTML:

<style>
.overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  opacity: .5;
  filter: alpha(opacity=50);
  visibility: hidden;
}

.popup {
  visibility: hidden;
  position: absolute;
  background: lime;
}
</style>

<script>
function createPopUp(divId) {
  var overlay = document.getElementById('overlay');
  overlay.style.visibility = 'visible';
  document.body.appendChild(overlay);

  var popup = document.getElementById(divId);
  var top = (window.innerHeight / 2) - (popup.style.height.substr(0,3) / 2);
  var left = (window.innerWidth / 2) - (popup.style.width.substr(0,3) / 2);
  
  popup.style.top = top +'px';
  popup.style.left = left +'px';
  popup.style.visibility = 'visible';
  document.body.appendChild(popup);
}

function deletePopUp(divId) {
  var overlay = document.getElementById('overlay');
  overlay.style.visibility = 'hidden';
  document.body.appendChild(overlay);

  var popup = document.getElementById(divId);
  popup.style.visibility = 'hidden';
  document.body.appendChild(popup);
}
</script>

<input type="button" onclick="createPopUp('test')" value="klik!">

<div id="overlay" class="overlay">

<div id="test" class="popup" style="width: 200px; height: 100px;">
  Dit is test content met een <input type="button" onclick="deletePopUp('test');" value="button!">
</div>

[ Voor 24% gewijzigd door Reveller op 13-11-2006 22:54 ]

[Suaver]

Reveller, als nu je browser wordt geresized, schrijft hij opnieuw de div.

JavaScript:

<html>
<head>
<style>
.overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  opacity: .5;
  filter: alpha(opacity=50);
  visibility: hidden;
}

.popup {
  visibility: hidden;
  position: absolute;
  background: lime;
}
</style>

<script>
function createPopUp(divId) {
  var overlay = document.getElementById('overlay');
  overlay.style.visibility = 'visible';
  document.body.appendChild(overlay);

  var popup = document.getElementById(divId);
  var top = (window.innerHeight / 2) - (popup.style.height.substr(0,3) / 2);
  var left = (window.innerWidth / 2) - (popup.style.width.substr(0,3) / 2);

  popup.style.top = top +'px';
  popup.style.left = left +'px';
  popup.style.visibility = 'visible';
  document.body.appendChild(popup);
}

function deletePopUp(divId) {
  var overlay = document.getElementById('overlay');
  overlay.style.visibility = 'hidden';
  document.body.appendChild(overlay);

  var popup = document.getElementById(divId);
  popup.style.visibility = 'hidden';
  document.body.appendChild(popup);
}

function movePopUp(divId) {
  if (document.getElementById('overlay').style.visibility == 'visible')
    createPopUp(divId);
}
</script>
</head>

<body onResize="movePopUp('test');">

<input type="button" onclick="createPopUp('test')" value="klik!">

<div id="overlay" class="overlay">

<div id="test" class="popup" style="width: 200px; height: 100px;">
  Dit is test content met een <input type="button" onclick="deletePopUp('test');" value="button!">
</div>

</body>
</html>

[OkkE]

Je kunt het ook d.m.v. CSS een element in het midden van de pagina laten centreren. Het werkt iig in Firefox en IE7.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <style type="text/css">
    #popup {
        position:absolute;
        top:50%;
        left:50%;
        height:100px;
        width:200px;
        background:lime;
        margin-top:-50px;
        margin-left:-100px;
        }
    </style>
</head>
<body>

<div id="popup">
    <p>Dit is een test.</p>
</div>

</body>
</html>

[Suaver]

Reveller schreef op maandag 13 november 2006 @ 21:13:
@Cheatah - nu aangepast mbv css. Hoop dat het nu netjes is Ik heb alleen 1 probleem: hoe kan ik ervoor zorgen dat de popup-div realtime opschuift (en dus in het midden van de pagina blijft) als ik de browser resize? Hoe kan ik een onresize actie meegeven die realtime de top en left positie van de popup verandert?

Hmm, kom er net achter dat je voorbeeld alleen in FF werkt en niet in IE

[mithras]

OkkE schreef op dinsdag 14 november 2006 @ 08:56:
Je kunt het ook d.m.v. CSS een element in het midden van de pagina laten centreren. Het werkt iig in Firefox en IE7.

Doe dat dan gewoon op de juiste manier:

Cascading Stylesheet:

#popup {margin: 0 auto 0 auto;}

Heb je geen left attribuut, negatieve margins of absolute positionering nodig

[/offtopic]

OkkE schreef op dinsdag 14 november 2006 @ 11:03:
[...]


Dat is een prima oplossing als je 'm alleen horizontaal wilt centreren.

Wil je 'm echt in het midden hebben, ook vertikaal, dan zal je het toch op zo'n manier als ik poste moeten doen..

Je hebt gelijk, ik heb weer eens niet goed gelezen

[ Voor 32% gewijzigd door mithras op 14-11-2006 11:12 ]

[OkkE]

mithras86 schreef op dinsdag 14 november 2006 @ 10:57:
[...]
Doe dat dan gewoon op de juiste manier:

Cascading Stylesheet:

#popup {margin: 0 auto 0 auto;}

Heb je geen left attribuut, negatieve margins of absolute positionering nodig

[/offtopic]

Dat is een prima oplossing als je 'm alleen horizontaal wilt centreren.

Wil je 'm echt in het midden hebben, ook vertikaal, dan zal je het toch op zo'n manier als ik poste moeten doen..

[kmf]

Is dat niet gewoon een lightboximplementatie? lightbox, tightbox, whateverbox?

[mithras]

kmf schreef op dinsdag 14 november 2006 @ 17:25:
Is dat niet gewoon een lightboximplementatie? lightbox, tightbox, whateverbox?

Lightbox gebruikt eenzelfde principe om afbeeldingen weer te geven. Echter is dit gewoon een stukje javascript wat iedereen zelf kan gebruiken. Lightbox is handig omdat je alleen het javascriptje hoeft te laden, en dan met een rel attribuut het plaatje met lightbox kan tonen.

Het idee van 100% * 100% div en daaroverheen iets anders plakken is gewoon iets van js.

[Reveller]

Ik heb nu het volgende. Omdat ik de body-tag onaangeroerd wil laten, voeg ik het onResize event toe mbv een functie. Alles werkt zoals het moet werken (in IE en FF), maar ik krijg wel een foutmelding:

Error: document.getElementById("overlay") has no properties
Source File: file:///bla
Line: 49

Ik snap niet waarom deze error gegenereerd wordt ("overlay" bestaat immers gewoon), laat staan dat ik het kan oplossen Wie weet het wel? Ook andere suggesties mbt onderstaande code ("dit kan beter", "waarom doe je niet dat" etc) hoor ik graag. Alvast bedankt voor jullie hulp tot nu toe

HTML:

<html>
<head>
<style>
.overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  opacity: .5;
  filter: alpha(opacity=50);
  visibility: hidden;
}

.popup {
  top:50%;
  left:50%; 
  visibility: hidden;
  position: absolute;
  background: lime;
}
</style>

<script>
function createPopUp(divId) {
  var overlay = document.getElementById('overlay');
  overlay.style.visibility = 'visible';
  document.body.appendChild(overlay);

  var popup = document.getElementById(divId);
  popup.style.marginTop = '-'+ popup.style.height.substr(0,3) / 2 +'px';
  popup.style.marginLeft = '-'+ popup.style.width.substr(0,3) / 2 +'px';
  popup.style.visibility = 'visible';
  document.body.appendChild(popup);
}

function deletePopUp(divId) {
  var overlay = document.getElementById('overlay');
  overlay.style.visibility = 'hidden';
  document.body.appendChild(overlay);

  var popup = document.getElementById(divId);
  popup.style.visibility = 'hidden';
  document.body.appendChild(popup);
}

function movePopUp(divId) {
  if (document.getElementById('overlay').style.visibility == 'visible') {
    createPopUp(divId);
  }
}

function addResizeEvent(func) {
  var oldOnresize = window.onresize;
  if (typeof window.onresize != 'function') {
    window.onresize = func;
  }
  else {
    window.onResize = function() {
      oldOnresize();
      func();
    }
  }
}

addResizeEvent(movePopUp('test'));
</script>
</head>

<body>

<input type="button" onclick="createPopUp('test')" value="klik!">

<div id="overlay" class="overlay">

<div id="test" class="popup" style="width: 200px; height: 100px;">
  Test content met een <a href="#" onclick="deletePopUp('test');">link</a>
</div>

</body>
</html>

[ Voor 4% gewijzigd door Reveller op 14-11-2006 23:10 ]

[Fuzzillogic]

• Popup.style.height.substr(0,3) -> parseInt(popup.style.height)
• Vergeet type="application/javascript" (of type="text/javascript" voor antieke browsers) niet bij je script-elementen.
• Vergeet doctype niet. Voorkomt ellendige quirksmode-rendering-problemen
• Je zou het OO kunnen maken, mocht je van SM houden

[user109731]

Reveller schreef op dinsdag 14 november 2006 @ 22:43:

Ik snap niet waarom deze error gegenereerd wordt ("overlay" bestaat immers gewoon), laat staan dat ik het kan oplossen Wie weet het wel?

JavaScript:

addResizeEvent(movePopUp('test')); 

Ik vermoed dat daar je movePopUp al word aangeroepen, en dat is tijdens het laden van de pagina, dus nog voor dat er een #overlay bestaat

[Suaver]

Grote prutser schreef op dinsdag 14 november 2006 @ 23:27:
[...]

JavaScript:

addResizeEvent(movePopUp('test')); 

Ik vermoed dat daar je movePopUp al word aangeroepen, en dat is tijdens het laden van de pagina, dus nog voor dat er een #overlay bestaat

JavaScript:

//addResizeEvent(movePopUp('test')); 

Inderdaad, comment het en het werkt, in zowel FF als IE.