Derse geri dön
Bu materyal sadece English, Español, فارسی, Français, Italiano, 日本語, Русский, Українська, 简体中文 dillerinde mevcuttur. Lütfen Türkçe diline çevirmek için bize yardım edin.

Modal form

önem: 5

Create a function showPrompt(html, callback) that shows a form with the message html, an input field and buttons OK/CANCEL.

  • A user should type something into a text field and press Enter or the OK button, then callback(value) is called with the value they entered.
  • Otherwise if the user presses Esc or CANCEL, then callback(null) is called.

In both cases that ends the input process and removes the form.


  • The form should be in the center of the window.
  • The form is modal. In other words, no interaction with the rest of the page is possible until the user closes it.
  • When the form is shown, the focus should be inside the <input> for the user.
  • Keys Tab/Shift+Tab should shift the focus between form fields, don’t allow it to leave for other page elements.

Usage example:

showPrompt("Enter something<br> :)", function(value) {

A demo in the iframe:

P.S. The source document has HTML/CSS for the form with fixed positioning, but it’s up to you to make it modal.

Görevler için korunaklı alan aç.

A modal window can be implemented using a half-transparent <div id="cover-div"> that covers the whole window, like this:

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;

Because the <div> covers everything, it gets all clicks, not the page below it.

Also we can prevent page scroll by setting'hidden'.

The form should be not in the <div>, but next to it, because we don’t want it to have opacity.

Çözümü korunaklı alanda aç.