我想使用UIkit.modal.confirm
来确认用户在UIkit.modal.prompt
中的输入,如果他们确认然后继续,否则返回UIkit.modal.confirm
。
UIkit.modal.prompt('Input','').then(function(input){
UIkit.modal.confirm(input).then(function(){
.... //proceed
},function(){
..... // How do I got back to the previous prompt?
})
})
答案 0 :(得分:1)
这可能不是最好的解决方案,但是它需要递归,因此我基本上将您的代码划分为 2个独立的函数 ,其中一个用于prompting
(并要求确认),另一个要求confirmation
(并在需要时显示提示)。
注释了代码,因此您可以了解在什么步骤中会发生什么。
// run prompt on page load
prompt();
// display confirmation, after confirming, value is printed, if not confirmed, prompt is displayed again
function confirm(input) {
UIkit.modal.confirm('Confirm ' + input + ' ?').then(
function() {
// input confirmed, set value to the field
document.getElementById('confirmed-value').value = input;
},
function() {
// input not confirmed, show prompt again
prompt(input);
}
);
}
// display prompt, after entering value ask for confirmation, if empty, prompt again, if cancelled, stop showing prompt, if after cancelled confirmation, shows previously entered value
function prompt(input = "") {
UIkit.modal.prompt('Please enter your value', input).then(function(input) {
// prompt submitted, input is not null
if (input) {
confirm(input);
}
// prompt submitted, input is not null but is empty
else if (input === "") {
prompt();
}
});
}
// trigger prompt with the button click (example)
UIkit.util.on('#trigger-prompt', 'click', function() {
prompt();
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" integrity="sha256-sO/kKFCHPL4rhYHDyHC2dwGlaIBttifOfQ0ZaGLAheo=" crossorigin="anonymous" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js" integrity="sha256-jN++RwBoYassp9qTuZDfQuptszFdL1Pm4dKZWS5KjjY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js" integrity="sha256-6pktS+jePPdXx9oCn8r4hS5jR1eq0Ry7vbifYtG0LDU=" crossorigin="anonymous"></script>
<button id="trigger-prompt" class="uk-button uk-position-top-center uk-button-primary uk-margin">PROMPT</button>
<output id="confirmed-value" class="uk-input uk-position-center" />