Zurb Foundation 5 close an alert box with personal button

Question

I'd like to "extend" the alert-box to have for example a confirm box or a prompt box but I also want to keep using the callback function close to store informations in a database for example.

the structure of my alert-box could be something like this :

<div data-alert class="alert-box success">
    <a href="#" class="close">&times;</a>
    <h4>This is a <span class="bold">title</span></h4>
    <p>This is an error alert a bit more complex.</p>
    <p>
        <a href="#" class="button alert-box-close">Close</a>
        <a href="#" class="button alert">Cancel</a>
    </p>
</div>

The problem I have is how the .alert-box-close class works like the .close class ?

Thanx for your help

Answer 1

Go to file(if you load each module separately)

foundation.alert.js

line 23

$(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] a.close', function (e) {

you make it like that

$(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] a.close, .any-class-name', function (e) {

Answer 2

Use the jquery to hide the alert-box

   <div data-alert class="alert-box">
   <!-- Your content goes here -->
   <a href="#" id="closebutton" class="alert button">close</a>
   </div>

and the jquery is,

   $( "#closebutton" ).click(function() {
      $(this).parent().hide();
   });

Answer 3

This way work for me.

$(".alert-box .close").click(function(e) {
    e.preventDefault();
    $(this).parent().hide();
});

And before showing again, can put something like this:

$(".alert-box")
                    .removeClass("alert-close")
                    .removeClass("hide")
                    .addClass("success")
                    .show();