如何使用“俏皮的情态”删除确认信息

How to use "nifty modals" to delete confirmation

本文关键字：俏皮的情态 删除 确认 信息 何使用      更新时间：2023-09-26

我使用这个:http://tympanus.net/Development/ModalWindowEffects/

但问题是，如何改变标准模式的东西，如javascript confirm() .

这是HTML:

<!-- Modal -->
    <div class="modal fade" id="mod-delete" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
              <div class="text-center">
                  <div class="i-circle warning"><i class="fa fa-warning"></i></div>
                  <h4>Big warning!</h4>
                  <p>You are going to delete this item!</p>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" id="delete-yes" class="btn btn-warning" data-dismiss="modal">Continue</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

下面是触发事件的链接:

<a class="label label-danger delete-confirmation" data-toggle="modal" data-target="#mod-delete" href="{$base_url}user/delete/{$user.UserID}"><i class="fa fa-times"></i></a>

然后我这样做:

// universal delete confirmation dialog
$('#delete-yes').on('click',function(){
    window.location = $(".delete-confirmation").attr('href');
});

但是!选择器$('.delete-confirmation')获取页面上的每个项目(我正在从DB删除用户)。我想确认只删除一个被点击的项目。

简单:我点击删除用户(这个链接有"href"属性-包含delete-link)。我看到了模态窗口，如果我点击"继续"，我会去删除这个项目的链接。

有人能解决这个问题吗?

我建议:

  1. 将点击链接的href值传递给模态div，你可以这样做:

    $('.delete-confirmation').on('click',function(){ $('#mod-delete').attr("nhref", $(this).attr("href)); });

  2. 一旦你把href值传递给模态div，你可以使用:

    $('#delete-yes').on('click',function(){ window.location = $("#mod-delete").attr('nhref'); });

可能不是最好的解决方案，但它应该可以工作(可能需要对代码进行一些小更改，但总体思路可以工作)。

相关文章：