Gathering of Tweakers

Daan

Daan — Sat, 10 Dec 2011 22:03:09 GMT

Hier is hoe ik het vaak doe. In je HTML heb je een overlay div en een popup div die standaard display: none zijn.

JavaScript:

$(".show").click(function() {
    $("#overlay").fadeIn("fast");
    $("#popup").fadeIn("fast");
}

function closePopup() {
    $("#overlay").fadeOut("fast");
    $("#popup").fadeOut("fast");
}

$("#overlay").click(function() {
    closePopup();
});

$(".close").click(function() {
    closePopup();
    return false; // prevent default (hoeft alleen als dit een  element is)
});

Juup

Juup — Sat, 10 Dec 2011 20:39:45 GMT

Wiethoofd schreef op vrijdag 09 december 2011 @ 18:10:
Die heb ik ook al geprobeerd, en waar ik dan klik in m'n form of #edit zelf krijg ik altijd de
met inhoud terug (even met alert() gecheckt). (waarschijnlijk omdat het dus een $('#edit').click() is en de $(this) dus de inhoud van die #edit teruggeeft)

Je moet ook niet naar je this kijken maar naar je evt.target

Wiethoofd

Wiethoofd — Sat, 10 Dec 2011 16:37:40 GMT

Ik heb volgens mij een nette oplossing gevonden:
- Met jQuery een

laten prependen bij de body tag
- De .close die er eigenlijk met JS al geprepend werd (in een

gefloat in het edit form) had al een delegate() die ik nu met een , #overlay ook weer uit de DOM laat verwijderen en de click actie erop wordt ook netjes geregistreerd.

JavaScript:

/* Openen edit form, tonen overlay en extra handelingen */
 $('.edit').click(function() {
    /* aantal nodige acties hier */
    $('#edit, #overlay').show();
    $('body').prepend('
');
    $('#edit').prepend(''+titel+'X
');
 });

/* Sluiten edit form, verbergen overlay en opschonen */
 $(document).delegate('.close, #overlay', 'click', function() {
    $('#edit').hide();
    $('#edit h2, #overlay').remove();
 });

Wiethoofd

Wiethoofd — Fri, 09 Dec 2011 21:33:46 GMT

Dat alles buiten het 'modal' niet meer klikbaar is (behalve om te sluiten) => Lightbox

quote: http://en.wikipedia.org/wiki/Modal_window
However, many interface designers have recently taken steps to make modal windows more obvious and user friendly by darkening the background behind the window or allowing any mouse click outside of the modal window to force the window to close – a design called a Lightbox – thus alleviating those problems.

En dat heb ik dus ook, maar dan met dezelfde div met daarin het form genest, schijnbaar werkt dat dus niet en moeten deze los van elkaar.

D-Raven

D-Raven — Fri, 09 Dec 2011 20:21:23 GMT

Wat je vaak ziet is dat men een overlay div gebruikt om een modal popup effect te creeeren, waarbij je popup zichtbaar is, en over de rest van je site een grijze/zwarte transparent overlay ligt.

Als je zo'n overlay gebruikt (met kleur of niet) dan is het kinderspel om in te bouwen dat als je buiten je form klikt (dus op de overlay) je form moet sluiten.

Kijk anders eens naar: http://fancybox.net/

Wiethoofd

Wiethoofd — Fri, 09 Dec 2011 17:10:00 GMT

Die heb ik ook al geprobeerd, en waar ik dan klik in m'n form of #edit zelf krijg ik altijd de met inhoud terug (even met alert() gecheckt). (waarschijnlijk omdat het dus een $('#edit').click() is en de $(this) dus de inhoud van die #edit teruggeeft)

Juup

Juup — Fri, 09 Dec 2011 16:58:37 GMT

Je kunt binnen je $('.edit').click() even in je event target kijken waar er werkelijk op geklikt is.

Wiethoofd

Wiethoofd — Fri, 09 Dec 2011 16:10:56 GMT

Ik heb voor een simpele edit van een item een div onderin m'n html staan met daarin een form. Klik je op de edit-knop dan gaat de div full venster en het form wordt netjes 'dead center' gepositioneerd. Sluiten/verbergen gaat ook prima met de click() op een .close in het form zelf.

Nu het probleem: ik wil dat klikken buiten het form in de omringende div de boel ook sluit, maar als je in het form zelf klikt moet dat dus niet. Dit is logisch, anders zijn de inputs in dat form niet aan te klikken.

Met jQuery die click() afvangen en kijken welke id of class of object/html aangeklikt wordt om vervolgens de gewenste actie (niets of sluiten) te doen gaat niet goed.

De relevante html, css en jquery:

HTML:

<span class="edit">Bewerkspan>
<div id="edit">
  <form>
   <span class="close">Sluitspan>
  <input type="text" name="data">
  <input type="submit" value="Wijzig">
 form>
div>

Cascading Stylesheet:

#edit {
 display: none;
}
#edit:before {
 position: fixed;
 top: 0; bottom: 0; left: 0;
 width: 100%; height: 100%;
 z-index: 50;
 opacity: 0.5;
 background-color: #999;
 content: '';
}
#edit form {
 position: absolute;
 top: 50%; left: 50%;
 width: 500; height: 500;
 margin: -250px 0 0 -250px;
 z-index: 100;
 border: 1px solid #000;
 background-color: #F7F7F7;
}

JavaScript:

 $('.close').click(function() {
    $('#edit').hide();
 });
 $('.edit').click(function() {
    $('#edit').show();
 });

Varianten op de show en hide zijn de .css('display', 'block/none') en de .click met meerdere comma seperated classes en in de function controleren of de #edit is(':visible'); Ook de #edit:before overlay met jquery targetten bij de click doet niets.

Ook met een not('#edit *') en varianten met > en ~ getest, maar haalt niets uit.

Is het probleem dat ik m'n form in de 'overlay' div genest heb en daardoor de boel niet netjes te sluiten is of speelt het gebrek aan javascript/jquery kennis me nu gewoon parten