modals   253

« earlier    

Popups: 10 Problematic Trends and Alternatives
Whether modal or not, most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and contribute to user disorientation.
patterns  ux  modals 
6 weeks ago by gglnx
User-Friendly Exit Intent Modals | Julian Gaviria — Web Designer
As users, we hate popups. We never click on them. They’re annoying. They get in the way. But as conversion rate optimizers, they just work.
exit_survey  exit_intent  modals 
9 weeks ago by autopoietic
Prevent Page Scrolling When a Modal is Open
Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal.

That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant to do) but the rest of page continues to behave as normal.

Sometimes this is a non-issue, like screens that are the exact height of the viewport. Anything else, though, we're looking at Scroll City. The good news is that we can prevent that with a sprinkle of CSS (and JavaScript) trickery.
fridayfrontend  css  javascript  cssbasics  modals  scroll 
10 weeks ago by spaceninja
Movin' Modals Along a Path
Modals always be just appearin'. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from "above" or "below." But we can get weirder than that. Why not have them come in on an offset-path?
fridayfrontend  css  cssbasics  modals  offset-path  animation 
10 weeks ago by spaceninja
Details / Summary Are Not [insert control here]
Please take some time to test with various browsers, versions, platforms, devices, assistive technology, connection speeds, and most importantly, _users_. Just because you see a pattern on your favorite site does not in itself signal that it is a good pattern. It may actually signal that your favorite site did not test these things.
fridayfrontend  accessibility  html  details  summary  accordions  tabs  menus  modals 
may 2019 by spaceninja
Modal Verbs / Perfect Modals Part 1 – Grammar – شرح الدرس بالدارجة المغربية
<a rel="nofollow" href="">Modal Verbs / Perfect Modals Part 1 – Grammar – شرح الدرس بالدارجة المغربية</a><br />
<a rel="nofollow" href="">Modal Verbs / Perfect Modals Part 1 – Grammar – شرح الدرس بالدارجة المغربية</a><br />
<a rel="nofollow" href="">Modal Verbs / Perfect Modals Part 1 – Grammar – شرح الدرس بالدارجة المغربية</a><br />
<a rel="nofollow" href="">سناب بلس</a><br />
<a rel="nofollow" href="">سناب بلس</a>
<p>Modal Verbs / Perfect Modals Part 1 – Grammar – شرح الدرس بالدارجة المغربية Modal Verbs / Perfect Modals Part 1 – Grammar – شرح درس ——————- VIDEOS ———————— Modal Verbs / Perfect Modals Part 2 … Modal Verbs,Perfect Modals,Grammar,Modal Verbs / Perfect Modals Part 1,Modal Verbs / Perfect Modals Part 1 – Grammar – …</p>
<p>The post <a rel="nofollow" href="">Modal Verbs / Perfect Modals Part 1 – Grammar – شرح الدرس بالدارجة المغربية</a> appeared first on <a rel="nofollow" href="">سناب بلس</a>.</p><img src="" height="1" width="1" alt=""/>
فيديو  baccalaureate  course  EasyGlish  english  lesson  grammar  Lbac  Meknes  Modal  Modal  Verbs  Modal  Verbs  /  Perfect  Modals  Part  1  Modal  Verbs  /  Perfect  Modals  Part  1  -  -  شرح  درس  Modals  Morocco  Perfect  Modals  إيزيكليش  الإنجليزية  الدرس  المغربية  بالدارجة  تعلم  الإنجليزية  دروس  دروس  الإنجليزية  دروس  البكالوريا  شرح  قناة  مغربية  from instapaper
march 2019 by snapeplus
Having an open dialog
To build a native modal dialog you’ll need more than just the <dialog> element. You’ll also need a bit of JavaScript (and if you think that’s odd, you’re not the only one). Such a requirement makes dialogs unique compared to other natively interactive HTML elements (re: some of the more intricate HTML5 form controls or the interactive details and summary elements).
fridayfrontend  cssbasics  html  dialog  modals  accessibility 
march 2019 by spaceninja
don’t get clever with login forms
Good examples of do's and dont's in designing login forms.
Mostly from a UX perspective. Tries to be helpful to password managers.

1. Modals.
2. Hidden fields.
3. Magic links.
4. Splitting across multiple forms.
login  forms  advice  modals 
february 2019 by drmeme

« earlier    

related tags

/  -  1  2015  4me280  accessibility  accessible  accordions  admin  advice  ajax  alert  alerts  analysis  and  android  angular2  animation  api  apollolibrary  apollowebstudio  application  aria  baccalaureate  best-practice  bestof  bestpractices  bestpractise  bookmarks_toolbar  bootstrap  buttons  cards  charts  codepen/jsfiddles/dabblets  codepens  colorpicker  component  components  context-menu  course  crm  css/animations  css/bootstrap  css  css3  cssbasics  cta  dashboard  datepicker  design  designpattern  designpatterns  details  dev-tools  development  diagrams  dialog  dialogs  dom  easyglish  elt  english  enzyme  events  examples  exercises  exit_intent  exit_survey  facebook  filter  forms  frames  framework  freelance-tools  friday  fridayfrontend  from_google_chrome  front-end  gallery  grammar  graphics/resources  graphics/tools  grid  gui  history  how  html  html5  ia  icons  iframe  ignorethecode  images  interact  interface  interstitials  intros  ios  ipad  iphone  ixd  javascript  jquery  jsfiddle  json  layouts  lbac  lesson  libraries  library  lightbox  lists  login  main  markdown  material  matto  meknes  menu  menus  mobile  modal  modalz  modes  morocco  moz  ng2  nycda  offset-path  ordoro  overlays  panels  part  path  patterns  payments  perfect  php  picker  plugin  pop-ups  popover  popovers  popup  popups  portal  position  problems  process  profile  rails  react-components  react  reactjs  recommendations  reference  scroll  search  selector  seo  sidebar  sidebars  slider  sliders  slideshow  snippets  summary  swift  tables  tabs  tags  templates  they  time  tooltips  toread  transitions  typeahead  ui  unsorted_bookmarks  uploader  usability  user  userexperience  userinterface  ux  verbs  video  web-agency-studio-tools  web-components  web-design  web-dev-tools  web-dev  web-development  web  webdesign  webdev  webdevappmodule  whiteboard  windowing  with  wordpress/plugin  wordpress  work  wysiwyg  youtube  إيزيكليش  الإنجليزية  البكالوريا  الدرس  المغربية  بالدارجة  تعلم  درس  دروس  شرح  فيديو  قناة  مغربية 

Copy this bookmark: