В конце концов мне пришлось уйти в отставку, чтобы больше не использовать alert() и confirm().
Я просто сделал две простые функции, которые заменяют стандартные:
function async_alert(message) {
$("body").append("<div class='alert-box'>\
<div class='alert-surface'>\
<h2>Alert</h2></header>\
<p>" + message + "</p>\
<button type='button' class='alert-remove'>OK</button>\
</div>\
<div class='alert-backdrop'></div>\
</div>");
$(".alert-remove").off("click").on("click", function() { $(".alert-box").remove(); });
}
function async_confirm(message, onAcceptFunction) {
$("body").append("<div class='confirm-box'>\
<div class='confirm-surface'>\
<h2>Confirm</h2>\
<p>" + message + "</p>\
<button type='button' class='confirm-remove'>Cancel</button>\
<button type='button' class='confirm-accept'>OK</button>\
</div>\
<div class='confirm-backdrop'></div>\
</div>");
$(".confirm-remove").off("click").on("click", function() { $(".confirm-box").remove(); });
$(".confirm-accept").off("click").on("click", onAcceptFunction);
}
Вы должны настроить свои стили так, чтобы div .alert-box полностью закрывал окно просмотра, а div .alert-surface становился центрированным прямоугольником, содержащим информацию. Например.:
.alert-box, .confirm-box {
position: fixed;
top: 0;
left: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 100000;
display: flex;
align-items: flex-start;
}
.alert-surface, .confirm-surface {
opacity: 1;
visibility: visible;
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
background-color: #fff;
display: inline-flex;
flex-direction: column;
width: calc(100% - 30px);
max-width: 865px;
transform: translateY(50px) scale(.8);
border-radius: 2px;
}
.alert-backdrop, .confirm-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.87);
opacity: .3;
z-index: -1;
}
Вы можете использовать async_alert() так же, как исходную функцию alert(), но имейте в виду, что эта вновь определенная функция просто асинхронна, а другая синхронна (поэтому она не останавливает выполнение javascript во время выполнения, ожидая вашего щелчка).
Вы также можете заменить стандартную функцию оповещения браузера:
window.alert = async_alert;
Чтобы использовать функцию async_confirm(), вы должны немного изменить свой код:
if(confirm("Do something?") {
console.log("I'm doing something");
}
to:
async_confirm("Do something?", function() {
console.log("I'm doing something");
});
Еще раз обратите внимание, что async_confirm() является асинхронной функцией по сравнению со стандартной функцией подтверждения().
person
Michele DC
schedule
28.03.2018