网页编程中,常常会出现模式对话框,模式对话框有很多比较有意思的特点,比如其它模块内容被冻住了,跳格键的顺序,关闭,确定按钮,图标摆放,从css到javascript怎么编程,本文对这个主题进行了详细描述。

献良发布于2018/10/05 14:06

注脚

1.Developing a Web Accessible Modal Dialog b y Dennis Lembree, PayPal CSUN14 San Diego, CA Thursday, March 20, 2014

2.Developing a Web Accessible Modal Dialog b y Dennis Lembree, PayPal CSUN14 San Diego, CA Thursday, March 20, 2014

3.About Me PayPal Accessibility Team: Victor Tsaran , Senior Accessibility Program Mgr Cathy O’Connor, Senior Designer Nawaz Khan, Senior Web Developer (Chennai) Dennis Lembree, Senior Web Developer @ dennisl Srinivasu Chakravarthula , CQ (Bangalore) @ PayPalinclusive paypal.com /inclusive

4.About You Developer? Designer? Other? From where?

5.About You Developer? Designer? Other? From where?

6.About You Developer? Designer? Other? From where?

7.About You Developer? Designer? Other? From where?

8.About You Developer? Designer? Other? From where?

9.About You Developer? Designer? Other? From where?

10.About You Developer? Designer? Other? From where?

11.About You Developer? Designer? Other? From where?

12.About You Developer? Designer? Other? From where?

13.Interaction Patterns

14.Interaction Patterns W hen opening, focus is set within modal (where to focus depends on content and level of support) Tab key : focuses elements within modal focus must be held within the dialog until it is cancelled or submitted Escape key ( and close button) closes the modal window f ocus is set back to the element from where the customer clicked/ entered

15.Interaction Patterns WebAIM modal diagram

16.Interaction Patterns Debatable: Modal windows are not moveable and cannot be dragged . Clicking outside of modal window does nothing . On what element to focus when opening also depends on use case.

17.Interaction Patterns DEMO Easy Chirp 2 http ://www.easychirp.org/ tools

18.Code

19.Code As always, use best practices such as semantic markup. Recommend progressive enhancement, to what level is up to you.

20.Code Relevant ARIA attributes: r oles: dialog , alertdialog , button a ria-label a ria- describedby a ria- labelledby Do not use CSS-only techniques mainly because you can’t manage focus .

21.Code - HTML < p><a href ="#search" class=" openModal " role= " button " > Open Modal</a></p> < div id="search" class="modal" role="dialog" aria-label="Search" tabindex =”-1" > < form id=" frmSearch " action="/search" method="post"> < label for=" query”> Enter search terms:</label> < input name="query" id="query" type="text" size="35" /> < button type="submit">Search</button> < /form> <div><button class="close">Close</button></div> < / div> < div id="mask"></div >

22.Code - CSS #mask { position : absolute ; z -index: 100; background -color: #666; display : none ; top : 0; left : 0; - moz -opacity: 0.8; opacity : 0.8; } .modal { position : fixed; width : 60%; max -width: 650px; min -width: 250px; display : none; z -index: 101 ; padding : 25px; background -color: # efefef ; }

23.Code - JavaScript Initialize for progressive enhancement // Initialize (these attributes can confuse AT user // if JS not running) $(". openModal "). attr (" role","button "); $(".modal"). attr (" role","dialog "); $(".modal"). css (" display","none ") ;

24.Code - JavaScript Start listener, get container and control, set size of modal and mask. $ (a[class= openModal ]).click(function(e) { e.preventDefault (); // Get modal containers var id = $(.modal); // Remember what opened me to focus when closing var lastFocus = $(this); // Set size of mask to size of screen resizeMask () ; // Set size and position modal resizeModal (id) ;

25.Code - JavaScript Start listener, get container and control, set size of modal and mask. $ (a[class= openModal ]).click(function(e) { e.preventDefault (); // Get modal containers var id = $(.modal); // Remember what opened me to focus when closing var lastFocus = $(this); // Set size of mask to size of screen resizeMask () ; // Set size and position modal resizeModal (id) ;

26.Code - JavaScript Provide behavior to close // Close - if close button is clicked $(.modal .close).click(function (e) { e.preventDefault (); $(#mask, .modal).hide(); lastFocus.focus (); }); // Close - Escape key $(document).on( keydown , function (e) { if ( e.keyCode === 27) { // ESC $(#mask, .modal).hide(); lastFocus.focus (); } });

27.Code - JavaScript More stuff: Resize modal when window resized Transition effects Rainbows and unicorns

28.Code - Demo Check it out on my Dropbox : https://db.tt/nhOW4nyw Fiddle with it! http://bit.ly/1ixv41E

29.Code Shim fix For some screen readers, there may be an issue with recognizing non -focusable content when using dialog and alertdialog roles. Fix below is hacky but works. <div id="search" class="modal" role="dialog" aria-label="Search" tabindex ="-1"> < div role=document tabindex ="0" > ... </div> </div>

30.Code For alertdialog (simple message and button) <div role=" alertdialog " aria- labelledby ="dialog1Title" aria- describedby ="dialog1Desc"> < h2 id="dialog1Title" >Are you sure?< /h2> < p id="dialog1Desc" > Lorem ipsum is simply dummy text< /p> < button >Yes< /button > < button >No< /button > < /div > More: http ://mzl.la/ 1ixouZ9

31.Code - Libraries Bootstrap Use with PayPal accessibility plugin http://paypal.github.io/bootstrap-accessibility-plugin/demo.html# modals Fixes: Close button now accessible to screen readers Adds role=document shim Manages focus after closing R eturns focus outline on close button

32.Code - Libraries YUI 3 http://yuilibrary.com/yui/docs/panel / Panel widget with modal attribute Lacks ARIA; doesn’t return focus jQueryUI https://jqueryui.com/dialog / Works well overall, good API Implementation more sensitive (seen broken many times) Focus placed on close button jQuery Mobile http://jquerymobile.com / Use popup widget; dialog deprecated  No ARIA Good focus management Escape not supported (although primary for mobile)

33.Final Thoughts

34.Final Thoughts My approach isn’t the only way or the best way. Do what works best for the developer organization (size, skill level). Do what works best for the use case(s). Assess the amount and type of content in the modal dialog. Requirements: browser support; internal or external website?

35.Final Thoughts A dialog element?! Yes! In the W3C HTML 5.1 Nightly: http://bit.ly/ 1gE6EFd

36.Final Thoughts A dialog element?! Yes! In the W3C HTML 5.1 Nightly: http://bit.ly/ 1gE6EFd

37.Final Thoughts Dialog element demos HTML5 Rocks: http://updates.html5rocks.com/tag/ dialog http://demo.agektmr.com/dialog / New! From CSUN 14 workshop by The Paciello Group: http://codepen.io/stevef/pen/ vDsfz Requires Chrome Canary; turn on "Enable experimental Web Platform features" in chrome://flags (and restart )

38.Further Reading Incredible Accessible Modal Window, Version 2 (Greg Kraus) http://bit.ly/ 1ixzIg6 A Few More Words on Accessible Dialogs/Modals (Hans Christian ) http://bit.ly/ 1gE71iP Custom-Built Dialogs ( Gez Lemon) http://bit.ly/ 1ixzOVh Using the dialog role (MDN) http://mzl.la/ 1ixzTIk

39.Questions @ PayPalinclusive

user picture
  • 献良
  • 非著名互联网公司工程师

相关Slides