Web Designer - - 30 best html, css & js apis -

Dis­play a popup or modal win­dow without the over­heads

A com­mon de­sign pat­tern on the web is to have an ex­tra win­dow dis­play to pro­vide more in­for­ma­tion or op­tions for a com­pli­cated in­ter­ac­tion. Adding a con­fir­ma­tion as an ex­tra step is also a good way to make a user aware their ac­tion will have con­se­quences. These win­dows have been around for years through the help of li­braries such as Boot­strap or jquery UI. While they can be easy to im­ple­ment, they of­ten re­quire heavy script­ing and ex­tra styling to match the look and feel of the site they are im­ple­mented into. One of the few el­e­ments added in HTML5.2 is <dia­log>. This new, se­man­tic el­e­ment is de­signed to de­note a sup­ple­men­tary, in­ter­ac­tive com­po­nent that dis­plays out of the main flow of the doc­u­ment.

<dia­log open>

<p>dia­log Con­tent</p> </dia­log>

The <dia­log> el­e­ment it­self is de­signed to be as sim­ple to use as pos­si­ble. Any con­tent within the tags will be­come part of the win­dow and do not ap­pear on the page by de­fault. When the el­e­ment has the ‘open’ at­tribute ap­plied, it then ap­pears cen­tred based on where it ap­pears in the DOM. While dia­log boxes can re­quest a re­sponse, a user can still nav­i­gate the page without hav­ing to in­ter­act with it. A modal win­dow is sim­i­lar to a dia­log, but has the aim of re­quir­ing an ac­tion from the user be­fore pro­ceed­ing. This makes it use­ful for po­ten­tially de­struc­tive ac­tions, such as delet­ing an ac­count.

const dia­log = doc­u­ment. getele­ment­byid(“modal”); dia­log.show­modal();

Modal win­dows can only be trig­gered us­ing Javascript. Once opened, the win­dow ap­pears com­pletely cen­tred within the user’s screen and dims the rest of the page. The only way to close it will be by ei­ther press­ing the es­cape key or by call­ing the ‘close’ method on the el­e­ment. Non-na­tive modal im­ple­men­ta­tions of­ten for­get about the con­tent be­hind the modal. For key­board users, their browser can start fo­cus­ing and in­ter­act­ing with el­e­ments un­der­neath the modal that can­not be seen. Na­tive modals make the rest of the con­tent in­ert, mak­ing sure the fo­cus stays within the win­dow be­fore be­ing dis­missed. Browser sup­port is cur­rently lim­ited to Chrome, Opera and Sam­sung In­ter­net browsers. As un­sup­ported browsers treat un­known el­e­ments like a <span>, it makes it pos­si­ble to add in this be­hav­iour when needed. The Chrome team have put to­gether a poly­fill, which can be found at https://github.com/ Googlechrome/dia­log-poly­fill

Forms inside a dia­log can sub­mit with a ‘form’ method. The ‘re­turn­value’ of the modal is the value of the but­ton used to sub­mit

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.