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

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/ में जाकर "वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करें" को चालू करें.