I am using ajax call to reveal my modal and then closing it using any of the following three ways:
By clicking on background div
By pressing
esc
keyBy clicking on the close button (
X
)
And it is working absolutely fine for all three options
But when it is opened -> closed -> opened
again its not closing by any of the ways it is expected to be closed.
Here is my html code:
<div class="reveal-modal-bg" style="display: block;">
</div>
<div id="trigger-reveal-size-match" class="reveal-modal small open" data- reveal="" style="display: block; opacity: 1; visibility: visible; top: 50px;">
<!--
Couple of divs here
-->
<a class="close-reveal-modal cc-icon-x" data-reveal-id="trigger-reveal-size-match"></a>
</div>
and here is my JS code:
$(".close-reveal-modal").on("click touchend", function() {
var revealId = "#" + $(this).attr("data-reveal-id");
$(revealId).foundation('reveal', 'close');
});
Anyone out there who knows how to fix this issue please help.
Thanks a lot in advance.