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

Chrome कैनरी ने फ़्लैग के पीछे डायलॉग एलिमेंट इस्तेमाल करने की सुविधा उपलब्ध कराई है. dialog एलिमेंट का इस्तेमाल, किसी वेब पेज में पॉप-अप के लिए किया जा सकता है.

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

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

dialog एलिमेंट अब इन सुविधाओं के साथ काम करता है:

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

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

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