[jQuery] In overlay-div genest form sluit bij click input

[Wiethoofd]

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">Bewerk</span>
<div id="edit">
  <form>
   <span class="close">Sluit</span>
  <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

[Juup]

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

[Wiethoofd]

Die heb ik ook al geprobeerd, en waar ik dan klik in m'n form of #edit zelf krijg ik altijd de <form> 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)

[ Voor 27% gewijzigd door Wiethoofd op 09-12-2011 18:11 ]

[D-Raven]

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/

[ Voor 6% gewijzigd door D-Raven op 09-12-2011 21:22 ]

[Wiethoofd]

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.

[Wiethoofd]

Ik heb volgens mij een nette oplossing gevonden:
- Met jQuery een <div id="overlay"></div> laten prependen bij de body tag
- De .close die er eigenlijk met JS al geprepend werd (in een <h2> 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('<div id="overlay"></div>');
    $('#edit').prepend('<h2>'+titel+'<span class="close">X</span></h2>');
 });

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

[Juup]

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 <form> 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

[Daan]

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 <a> element is)
});