Hello.

How can I make a modal window with Promise without the use of various frameworks?

On the Internet, for several days, I could not find an adequate example. (All examples on various bootstrap and their ilk. For my small home project, this is unnecessary.)

The task is simple:

  • by pressing the button, the logic is executed, part of which is the “call” of the window with the input field (and its own internal logic) and two buttons - “ok & cancel”;
  • It is necessary in the same piece of code back to get the result of the input.

Now everything is implemented via callback, but hell is going on there, I would like to use promises.

I am a little familiar with the promises themselves - ajax requests for them.

Thank you in advance.

Closed due to the fact that the essence of the question is not clear to the participants 0xdb , Vadizar , kizoso , AivanF. , slippyk Apr 12 '18 at 13:39 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    so redo the callbacks on Promise and that's it - Grundy
  • Any asynchronous function with callback can be easily converted into a Promise: new Promise(r=>func((...args)=>{ r(...args);})) plus variations with parameter passing. unless of course you now have half a Promise that you don’t know. - Grundy
  • All necessary information should be directly in question. Best of all there is a minimal reproducible example - Grundy
  • Nobody talked about wrapping the class. You only need to wrap the function call - Grundy
  • Obviously not enough. It is not clear that you have what you want to receive. My first comment quite answers the question in the current production. Actually the whole problem is that it seems to you that there is enough information - Grundy

1 answer 1

Found a solution:

 // Модальное окно class popup { constructor() { this._resolve; this._reject; } show() { ...<div><button id='no' type="button">No</button><button id='ok' type="button">Ok</button></div>... ok.addEventListener("click", function ok() { this._resolve(); }, false); no.addEventListener("click", function no() { this._reject(); }, false); document.body.appendChild(div); return new Promise((resolve, reject) => { this._resolve = resolve; this._reject = reject; }); } } // 2. Вызов (async () => { try { let result = await new popup().show(); ... } catch(e) { ... } })();