recentpopularlog in

piperh : modal   52

Prevent Page Scrolling When a Modal is Open
quite a fiddly faffy solution to the problem of scrolling page behind modal, but presumably does work.
webdesign  web  design  modal  scroll  window  js  javascript  script  css  ui 
7 weeks ago by piperh
The dialog element | Viget
about the native html dialog element. Sept 18, 2018. Not enough support at the moment (28.6.19) though there's a a11ydialog 'polyfill'
webdesign  web  design  dialog  popup  modal  element  window  html  native  polyfill 
september 2018 by piperh
Pushbar.js demo
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps
It is fully customizable and dependency free.You can use it as sidebar menus or option drawers. With option to blur background content. Vanilla js
webdesign  web  design  menu  sliding  panel  door  overlay  js  javascript  script  vanilla  modal 
august 2018 by piperh
Easy Toggle State
a js library to enable typical ui toggle effects and needs, like dropdowns, accordion, collapsible panel, switch, and more. With code examples and with added ARIA.
They say: Only set a few HTML attributes, and code the rest with your CSS skills.
3.6k compressed
webdesign  web  design  js  javascript  script  library  toggle  dropdown  navigation  button  tooltip  collapse  collapsible  modal  popup  switch  checkbox  radio 
june 2018 by piperh
Launchy! – An Accessible Modal Window
tabbing stays within modal window when it's invoked - needs the js file (not jquery)
webdesign  web  design  modal  launchy  window  popup  accessible  accessibility  js  javascript  script 
may 2018 by piperh
Sticky as a Local Fixed? | CSS-Tricks
trick to make an element have a position fixed in a local context - not scroll
webdesign  web  design  css  position  sticky  modal  scroll  local  absolute  fixed  transform  scope 
march 2018 by piperh
An Anonymous Pen on CodePen
a pen showing how to set up close for tap/click outside of modal
webdesign  web  design  fancybox  click  outside  close  tap  modal  js  javascript  script 
february 2018 by piperh
Meet the New Dialog Element
article describing new (jan 2018) native modal dialog, and a polyfill that makes it usuable now, for IE9 and up. Introduces new ::backdrop pseudo-element. Also describes how to fire a close if user clicks the backdrop
webdesign  web  design  css  dialog  modal  element  native  browser  backdrop 
january 2018 by piperh
Dialog Example
Filament Group page full of dialog modals
webdesign  web  design  modal  dialog  dialogue  window  popup 
january 2018 by piperh
Effeckt.css
library of css animations for buttons, modals, scrolls, nav, transitions, captions, tooltips, tabs. Useful, if the code is good. They claim to be performant, no janks
webdesign  web  design  css  transition  animation  effect  tab  button  slide  fade  modal 
november 2017 by piperh
Modal Dialogs
linked from a11y. Works with IE11 (the others there don't). Micromodal (not linked from a11y) doesn't work with IE11. Requires jQuery
webdesign  web  design  accessible  modal  window  accessibility  js  javascript  script  jquery 
november 2017 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
Micromodal.js - Tiny javascript library for creating accessible modal dialogs
titled: Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript
Demo doesn't work in Epic or Brave on iPad
webdesign  web  design  js  javascript  script  a11y  accessible  accessibility  modal  library  micromodal 
october 2017 by piperh
explodal
explosion effect behind the appearance of modal window
webdesign  web  design  css  js  javascript  script  modal  explosion  effect  window  popup 
june 2017 by piperh
[no title]
version 3 of fancybox, the jQuery modal zoom I use on tria site. There's a stackexchange answer to my question about size of zoomed image, with sample callback code. One can reduce the image to, eg, 50% of its real pixel size. Sounds good if it works and isn't slow.
fancybox  fancybox3  tria  modal  zoom  image  clickable  enlarge  reduce  responsive  pixel  size  resolution  x2  x3  density 
february 2017 by piperh
SimpleModal Demos / Eric Martin / ericmmartin.com
a jquery modal with some options. Only closes on X, not by clicking on overlay. But has a Success message that appears in the modal, so check that bit of the code for usage
webdesign  web  design  jquery  js  javascript  script  modal  overlay  window  form 
february 2017 by piperh
jQuery Modal
interesting looking modal, with useful options
webdesign  web  design  jquery  javascript  examples  howto  code  modal  window  dialogue 
january 2017 by piperh
14 jQuery Modal Dialog Boxes
some jquery (and a couple of vanilla) modals, updated late 2016
webdesign  web  design  modal  dialogue  window  popup  jquery  js  javascript  script  examples 
january 2017 by piperh
JS Bin - Collaborative JavaScript Debugging
fr dialogmodal Most basic html, css and js necessary for dialogmodal.
Accessible modal window, from the Frend collection:
https://frend.co/
webdesign  web  design  modal  dialogmodal  html  css  js  javascript  script  window  jsbin 
january 2017 by piperh
styles for Nicolas Hoffman simple modal animated
within styles search for: STYLES FOR MODAL WINDOWS, EXAMPLES. Shows his css styles for animating his modal window examples. The page about his modal is here: https://a11y.nicolas-hoffmann.net/modal/
nicolas  hoffman  css  modal  simple  animated  styles  examples  window 
january 2017 by piperh
jQuery simple and accessible modal window, using ARIA - By Nicolas Hoffmann
I made this work with medicar form on job descrip page, but with a few shortcomings and it didn't retain the Success message in the modal window, but closed the window instead
webdesign  web  design  modal  window  accessible  aria  jquery 
january 2017 by piperh
True adaptive Modal window (only HTML+CSS) – Medium
html and css only modal window. Uses checkbox hack for the toggling, I think
webdesign  web  design  html  css  modal  window 
january 2017 by piperh
A11y Dialog
accessible js-only modal window, no dependencies. Frend modal is developed from this I think. Freedom to style the css
Webdesign  web  design  css  modal  html  code  coding  window  popup  js  javascript  script  vanilla 
november 2016 by piperh
iziModal.js - Welcome
yet another modal plugin. Requires jQuery.
Quite elegant, lots of options
webdesign  web  design  modal  jquery  js  window  box  panel 
august 2016 by piperh
67 Open Source Modal Window Plugins Made with jQuery, JavaScript, CSS, and more!
a selection of modal window solutions. Includes fancybox (currently on Tria site) and some css only solutions.
A vanilla-js or css-only would be ideal for ph bookmarks
webdesign  web  design  modal  popup  window  jquery  js  javascript  css  selection  plugin  vanilla 
august 2016 by piperh
Frend — A collection of accessible, modern front-end components.
they say: Frend components are modest and dependency-free. Keyboard navigable. Components use js but no external library
webdesign  web  design  code  coding  components  library  accessible  dependency-free  accordion  modal  off-canvas  tabs  tooltip  ui  js  javascript 
june 2016 by piperh
Remodal v1. The modal done right.
Code for a modal window. Requires jQuery. They say "done right". Works smoothly, a click outside of window closes it.
webdesign  web  design  modal  window  popup  css  responsive 
february 2016 by piperh
FModal.JS
fullscreen modal window. Can only dismiss the window by clicking on the "X", though it might be poss to style the "X" so that it covers all or a big area of the window
webdesign  web  design  modal  js  javascript  jquery  popup 
september 2015 by piperh
Cookie Based Modal Popup Plugin For jQuery - Popup Window | Free jQuery Plugins
script installs cookie to control number of views - e.g. can set to show modal only on 1st visit
webdesign  web  design  modal  window  popup  cookie  jquery  js  javascript  plugin 
july 2015 by piperh
Simple Modal - Another window modal
looks interesting, check the weight of it. works on ipad.
jquery  js  javascript  modal  popup  zoom  video  iframe  simple  webdesign  web  design 
march 2014 by piperh
Floatbox - javascript effects library and lightbox clone
this was the js I used previously on Tria site for modal popups. I had version 5.4, now on v6.1.0 (19 Jan 2016).
floatbox  js  javascript  popup  effects  library  slideshow  gallery  fade  script  image  html  webdesign  web  design  multimedia  video  code  coding  enlarge  cycle  thumbnail  hide  show  tooltip  modal  non-modal  i-frame 
september 2012 by piperh
bPopup | Hvem glor - din bror
weird things happen on iOS when you enlarge popup with fingers - page starts to move around
jquery  popup  modal  webdesign  web  design  box  window 
september 2012 by piperh

Copy this bookmark:





to read