<!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();
Все работает нормально...
Вот на нем можно будет что-то показать.
