डायलॉग एलिमेंट - मोडल इस्तेमाल करना आसान हो गया है

एजी कितामुरा
आईजी कितामुरा

Chrome Canary में फ़्लैग के पीछे मौजूद डायलॉग एलिमेंट काम करता है. dialog एलिमेंट का इस्तेमाल, वेब पेज में पॉप-अप के लिए किया जा सकता है.

  • show(): डायलॉग खोलें.
  • close(): डायलॉग बंद करें. एक वैकल्पिक आर्ग्युमेंट लेता है. अगर dialog.returnValue को सेट किया गया है, तो इस आर्ग्युमेंट का इस्तेमाल किया जा सकता है.
  • showModal(): मॉडल डायलॉग खोलें.
  • ::backdrop: मोडल डायलॉग के पीछे, बैकग्राउंड को स्टाइल करने के लिए सूडो एलिमेंट.
  • close इवेंट: डायलॉग बंद होने पर ट्रिगर होता है.

16 दिसंबर, 2013 को अपडेट

dialog एलिमेंट अब इनका इस्तेमाल करता है:

  • cancel इवेंट: मोडल डायलॉग पर Escape बटन दबाने पर सक्रिय होता है. यह इवेंट event.preventDefault() का इस्तेमाल करके रद्द किया जा सकता है.
  • autofocus एट्रिब्यूट: डायलॉग दिखाए जाने पर, मोडल डायलॉग में पहला फ़ॉर्म कंट्रोल उस समय फ़ोकस किया जाएगा जिसमें autofocus एट्रिब्यूट होता है. अगर ऐसा कोई एलिमेंट नहीं है, तो फ़ोकस करने लायक पहले एलिमेंट पर फ़ोकस किया जाता है.
  • form[method="dialog"]: सिर्फ़ डायलॉग बॉक्स में ही मान्य होता है. फ़ॉर्म सबमिट होने पर, यह डायलॉग बॉक्स बंद कर देता है. साथ ही, dialog.returnValue को इस्तेमाल किए गए 'सबमिट करें' बटन की वैल्यू पर सेट करता है.

लाइव डेमो और पॉलीफ़िल की मदद से ज़्यादा जानकारी देखें.

chrome://flags/ में "प्रयोग के तौर पर वेब प्लैटफ़ॉर्म सुविधाएं चालू करें" को चालू करके इसे चालू करें.