2012-12-17 4 views
5

Mam kilka pozycji na liście, każdy element ma link do usunięcia, chcę pokazać modalne okno pokazane po naciśnięciu przycisku usuwania z linkiem TAK i Anuluj w środku.Foudation Zurb dynamic Reveal modal box

Jeśli użytkownik naciśnie przycisk Tak modalne ujawnić powinna przekierować na coś takiego:

www.url.com/delete/item_id

jak mogłem zdać ITEM_ID do okna modalnego Reveal?

Fundacja odsłonić modalne okno: http://foundation.zurb.com/docs/reveal.php

Modal Box (item_id powinny być przekazywane do modalne okno):

<div id="myModal" class="reveal-modal [expand, xlarge, large, medium, small]"> 
    <h2>Are you sure you want to delete this item?</h2> 
    <a href="/delete/item_id">Yes</a> 
    <a class="close-reveal-modal">Cancel</a> 
</div> 

Wywołanie Reveal:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#deleteItem").click(function() { 
     $("#myModal").reveal(); 
    }); 
    }); 
</script> 

HTML (powinien item_id być przekazywane do modalny):

<a href="item_id" class="button" data-reveal-id="myModal" id="deleteItem">Delete Item</a> 
+0

Czy ty mieć HTMl i kod? – CR41G14

+0

Edytowałem dla ciebie i dodałem trochę kodu, aby było bardziej zrozumiałe @ CR41G14 –

Odpowiedz

8

Ustaw wartość za pomocą jQuery przed .reveal(); nazywa

AKTUALIZACJA: See jsFiddle: http://jsfiddle.net/jgprU/

HTML:

<ul id="deleteItem"> 
    <li><a href="10">Click Me</a></li> 
    <li><a href="20">Click Me</a></li> 
    <li><a href="30">Click Me</a></li> 
</ul> 

<div id="myModal" class="reveal-modal"> 
    <h2>Are you sure you want to delete <span id="targetName">error</span>?</h2> 
    <a id="confirmDelete" href="setMe">Yes</a> 
    <a class="close-reveal-modal">Cancel</a> 
</div> 

Javascript:

$(document).ready(function() { 
    $("#deleteItem a").click(function(e) { 
    e.preventDefault(); 
    var target = $(this).attr('href'); 
    $("#confirmDelete").attr('href','/delete/' + target) 
    $("#targetName").text(target); 
    $("#myModal").reveal(); 
    }); 
}); 

+0

To tylko mija pierwszy HREF na mojej liście, a wartość jest zawsze wartością pierwszego HREF w kodzie źródłowym –

+0

Jakich brakowało mi część o usunięciu z listy przedmiotów. Zaktualizowałem odpowiedź roboczym przykładem i nowym kodem. –