alert - Zurb Foundation 5 关闭带有个人按钮的警报框

Question

我想将警报框“扩展”为具有例如确认框或提示框，但我也想继续使用回调函数关闭以将信息存储在数据库中。

我的警报框的结构可能是这样的：

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

我遇到的问题是.alert-box-close班级如何像班级一样工作.close？

感谢您的帮助

Answer 1

使用 jquery 隐藏警报框

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

而jQuery是，

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

Answer 2

转到文件（如果您分别加载每个模块）

基础警报.js

第 23 行

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

你就这样

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

Answer 3

这种方式对我有用。

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

在再次展示之前，可以这样写：

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