Показать сообщение отдельно
  #9 (permalink)  
Старый 29.10.2015, 15:52
Интересующийся
Отправить личное сообщение для ekkl-82 Посмотреть профиль Найти все сообщения от ekkl-82
 
Регистрация: 09.11.2013
Сообщений: 17

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#confirm {
  position: absolute;
  width: 280px;
  height: 0;
  border: 1px #230D33 solid;
  z-index: 1000;
  display: inline-block;
  border-radius: 6px;
  transition: height 7s;
  overflow: hidden; 
  text-indent: 0;
  box-sizing: border-box;
  background: linear-gradient(#F9F0FF 70%, #EAC9FF);
  box-shadow: 0 0 16px rgba(0,0,0,0.5)
}
#confirm.f-dropped {
  height: 160px;
}

#confirm .content {
 width:100%;
 box-sizing: border-box;
 font-size: 0.em;
}
</style>
</head>
<body>
  <div style="margin-left: 100px;">
 <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
           <p><a data-confirm href="aaa">confirm</a>
          </p>
    </div>
<script id="jsbin-javascript">
(function($, window) {
  window.Confirm = {
    name: 'confirm',
    version: '{{version}}',
    init: function(scope) {
      var self;
      self = this;
      this.scope = scope;
      if ($('body').has('#confirm').length === 0) {
        this.confirm = $('<span id="confirm"><span class="content">Вы уверенны в этом??? <a href="#">Удалить</a> <a href="#" role="cancel">Отменить</a> </span></span>').appendTo('body').hide();
      }
      $(this.scope).off('.confirm').on('click.confirm', '[data-confirm]', function(e) {
        self.toggle(e.target);
        e.preventDefault();
      });
      $('body').off('.confirm').on('click.confirm', function(e) {
        if ($(e.target).is('[data-confirm]')) {
          return;
        }
        return self.hide();
      }).on('keypress.confirm', function(e) {
        if (e.keyCode === 27) {
          return self.hide();
        }
      });
      $(this.confirm).off('.confirm').on('click.confirm', function(e) {
        return e.stopPropagation();
      });
    },
    show: function(el) {
      var self;
      self = this;
      $(this.confirm).show();
      return $(this.scope).on('click.confirm', function(e) {
        if (!$(e.target).is('#confirm')) {
          $(self.scope).off('.dialog');
          self.hide();
          return e.preventDefault();
        }
      });
    },
    hide: function() {
      var self;
      self = this;
      setTimeout(function() {
        if (!$(self.confirm).hasClass('f-dropped')) {
          $(self.confirm).hide();
        }
      }, 7000);
      return $(this.confirm).removeClass('f-dropped');
    },
    toggle: function(el) {
      var cent, left;
      cent = (parseInt($(this.confirm).css('width')) - $(el).width()) / 2;
      left = ($(el).offset().left) - cent;
      $(this.confirm).removeClass('f-dropped').insertAfter(el).show().css('left', left).addClass('f-dropped');
      $('#confirm a[role="cancel"]').focus();
      return $('#confirm .content').css('padding', '1em').css('display', 'inline-block');
    }
  };
})(Zepto, window);

Confirm.init(document);

</script>
</body>
</html>


Вот так кратко...
Удалось установить проблему. Если нет
$('#confirm a[role="cancel"]').focus();
Все работает нормально...

Последний раз редактировалось ekkl-82, 29.10.2015 в 16:11.
Ответить с цитированием