function doLater(cb) {
const d = {resolve: null, reject: null};
const promise = new Promise((resolve, reject) => {
d.resolve = resolve;
d.reject = reject;
});
function run() {
try {
cb(d.resolve, d.reject);
} catch(e) {
Promise.reject(e).catch(d.reject);
}
}
return {run, promise};
}
//example:
const d = doLater(ok => {
console.log('1');
ok();
});
console.log('2');
d.promise.then(() => {
console.log('3');
});
d.run();<body>
<div class="page-wrap">
</div>
<div class="modal-wrap"></div>
</body>html, body {
width: 100%;
height: 100%;
}
body {
overflow: hidden;
}
.page-wrap, .modal-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
}
.page-wrap: {
overflow: auto; /* или scroll */
}
.modal-wrap {
z-index: 1000;
display: none;
background: rgba(0,0,0, 0.5); /* стекло */
}
.modal-wrap__active {
display: block; /* или flex */
}@mixin flex($align: null, $direction: null) {
display: flex;
@if $align {
align-items: $align;
}
@if $direction {
flex-direction: $direction;
}
}
.header {
@include flex;
}
.content {
@include flex(center, column);
}
.footer {
@include flex;
}(function($){
var $target = $('селектор того у кого меняем');
var clickCount = 0;
var rules = [
function() { $target.removeClass('class3'); $target.addClass('class1'); },
function() { $target.removeClass('class1'); $target.addClass('class2'); },
function() { $target.removeClass('class2'); $target.addClass('class3'); }
];
$('селектор кнопки').on('click', function() {
rules[clickCount++ % rules.length]();
});
})(jQuery);