W3C released the 5.2 on 14th Dec 2017, 5.2 is the second revision of HTML 5. W3C wants to produce a revision every year after releasing HTML 5. I want to introduce you a new feature from HTML 5.2
Popup windows are very useful in web applications. There are a lot of 3rd party tools like Telerik or Component One which has great popup window extensions but they are not free. Also you can find free popup dialogs in open source location too. Main problem is free or not, they are third party and extra code to download for clients.
HTML 5.2 revision has a new solution for you if you like to use popup windows in your web application. Now popup dialogs are available in HTML by Dialog API. Since it's pretty new, not all browsers supports it. I have tried with Edge but it didn't work, you can test it by using the Google Chrome. I have created a demo in Code Pen, you can test it by using Google Chrome.
Dialog API has three functions
- show: It opens the dialog in popup mode, user can interact with the rest of the page in this mode.
- showModal : It opens the dialog in dialog mode, and user can't interact with the rest of the page in this mode.
- close : It closes the dialog/popup window.
You can style the rest of the page by using ::backdrop CSS pseudo-element. In the following example, I used the ::backdrop to change the color to gray.
This comment has been removed by a blog administrator.
ReplyDelete