mardi 5 mai 2015

Zurb Foundation 5 open modal with javascript close with close-reveal-modal

I have a link on my page that enables the user to open a modal - the code for this is:

<a href="#" data-reveal-id="edit-valuation-variation-item-modal-{{$variation_item->id}}">{{ $valuation_variation_items[$variation_item->id] }}</a>

When the modal has appears the user can click the [X] button to close the it. This is very standard out of the box stuff that simply uses a html 'a' tag with a class of close-reveal-modal like so:

<a class="close-reveal-modal">&#215;</a>

This is all well and good.

However, there are cases in which i need to use Javascript to automatically display the modal, and in order to do this I use the following standard out of the box code:

$('#edit-valuation-variation-item-modal-269').foundation('reveal', 'open', {
  animation: 'none',
  close_on_background_click: false,
  dismiss_modal_class: 'close-reveal-modal'
});

This works fine. However, when a modal is displayed this way, when the user clicks the [X] to close the modal - the modal closes but then the link on the page is no longer active, it wont reopen the modal as before. If i refresh the browser window all appears to reset and start working again.

Can anyone suggest how to re-enable the button to open the modal without refreshing the page.

I should add in order to reduct the code in the question the above code demonstrates a single link where as my page contains a number of links that do the same each with a different modal-Number - all of these links are affected and become unusable.

Thanks




Aucun commentaire:

Enregistrer un commentaire