Modal form

بازگشت به درس

یک function showPrompt(html, callback) ایجاد کنید که فرمی با پیام html، یک input field و دکمه‌های OK/CANCEL داشته باشد.

یک کاربر باید چیزی را در tex field تایپ کند و Enter را فشار دهد، آنگاه callback(value) با مقداری که وارد شده است فراخوانی می‌شود.
در غیر این صورت اگر کاربر Esc یا CANCEL را فشار دهد، callback(null) فراخوانی می‌شود.

در هر دو صورت،‌ این فرآیند input را تمام میکند و فرم را پاک میکند.

ملزومات:

فرم باید در وسط پنجره باشد.
فرم یک modal است. به عبارت دیگر، تا زمانی که کاربر آن را نبندد، هیچ تعاملی با بقیه‌ی صفحه مجاز نیست.
وقتی فرم نمایش داده می‌شود، focus برای کاربر باید درون <input> باشد.
کلیدهای Tab/Shift+Tab باید فوکوس را بین form fieldها جابه‌جا کنند و اجازه ندهند که به عناصر دیگر صفحه برود.

مثال از استفاده:

          showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});
        

نسخه‌ای نمایشی در iframe:

پی‌نوشت: source documentای که ارائه شده HTML/CSS برای فرم با fixed positioning را دارد، اما این بر عهده‌ی شماست که آن را به modal تبدیل کنید.

باز کردن یک sandbox برای تمرین.

یک modal window می‌تواند بااستفاده از یک <div id="cover-div"> نیمه‌شفاف که تمام پنچره را می‌پوشاند پیاده‌سازی شود،‌ مثل این:

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

از آنجایی که <div> همه چیز را می‌پوشاند، آن تمام کلیک‌ها را می‌گیرد،نه صفحه‌ی زیر آن.

همچنین با body.style.overflowY='hidden' می‌توانیم از scroll کردن صفحه جلوگیری کنیم.

فرم نباید در <div> باشد، بلکه باید کنار آن باشد، زیرا نمی‌خواهیم که opacity داشته باشد.

باز کردن راه‌حل درون sandbox.