Как использовать изящные модальные окна для удаления подтверждения

Я использую это: 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') получает каждый элемент на странице (я удаляю пользователей из БД). Я хочу подтвердить удаление только одного элемента, на который нажали.

Просто: я нажимаю, чтобы удалить пользователя (эта ссылка имеет атрибут "href" - содержит ссылку на удаление). Я вижу модальное окно, если я нажму «Продолжить», я перейду к удалению ссылки этого элемента.

Есть кто решал эту проблему?


javascript jquery confirmation
person Michaelo    schedule 30.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы предложил:

  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'); });

Вероятно, не лучшее решение, но оно должно работать (возможно, нужны небольшие изменения в коде, но общая идея работает).

Надеюсь это поможет.

person germc    schedule 23.07.2014