javascript - await bootstrap modal close by user

Question

I have a modal that shows a message before some other code runs after it.

I want to prevent the code until the user has pressed the OK button on it. I tried async/await like this below, which doesn't work, of course.

async function myMessage(){
    $('#id_my_modal').modal('show');
}

await myMessage();

I know I could use alert() but that doesn't work when screen is off while that code is executed. I am making a webRTC video call app. If there is incoming call I show a message which works when user is screen is on. But when screen is off and there is an incoming call alert() doesn't appear. Same with media permission dialog. It happens in FF, at least. But a modal appears even when the screen was off. That is why I want a modal.

Help would be much appreciated.

Answer 1

Finally got it working by using promises.

async function myMessage(){
    $('#id_my_message_modal').modal('show');
    return new Promise(resolve => 
        $('#id_my_message_button').on('click', () => {
                $('#id_my_message_modal').modal('hide');
                resolve();
            }
        )
    );
}

then

await myMessage();