basicModal: Modern dialog system for your web apps

 

basicModal is a dialog system for your modern web apps. It’s easy to use, includes support for text inputs, and includes drop-down elements, among other features.

basicmodal

 

 

basicModal

Easy-to-use dialog system for modern web-apps.

Modal Screenshot

basicModal is a dialog-system for modern web-apps. It includes everything you need to display information, ask questions or request input from the user. Modals can be chained, so you can easily build a setup-assistant or show dialogs in a predefined order. Invalid input can be highlighted and handled using the included function.

basicModal uses SASS, CoffeeScript, CSS3 Flexbox and only requires jQuery on your website.

Tested with the latest versions of Mozilla Firefox, Apple Safari, Google Chrome, Microsoft Internet Explorer (10+) and Opera.

 

 

 

 

 

 

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水
TAG modal

OuiBounce: A small modal library

/ Added on July 5, 2014 / Add to favorites

OuiBounce is a small library for creating modal windows that trigger when a user leaves your site. It aims to lower your bounce rate and increase your conversions, while offering a number of customizable options.

ouibounce

 

Increase your landing page conversion rates.

 

A small library enabling you to display a modal before a user leaves your website.

 

The philosophy behind this project

This library helps you increase landing page conversion rates. From my experience, you can expect a lift of 7% to 15% depending on your audience, traffic type (paid or unpaid) and copy.

Talking about copy... please use Ouibounce to provide value to your visitors. With tools like these it's very easy to create something spammy-looking.

Not sure what I mean by provide value? Here are a few ideas to get your creative juices flowing:

Demo / Examples

Installation

You have a few options to choose from:

  • Download the minified or unminified script and include it on your page
  • Get Ouibounce from cdnjs.com
  • Use Bower: curl http://bower.herokuapp.com/packages/ouibounce
  • Use NPM: npm install git://github.com/carlsednaoui/ouibounce.git

Note: Ouibounce is wrapped by a umd wrapper, so if you are using requirejs/amd or commonjs/browserify, it will still work fine.

 

Posted by 홍반장水 홍반장水

Flippant.js — A tiny library for flipping things over

 

http://labs.mintchaos.com/flippant.js/

 

 

Posted by 홍반장水 홍반장水

CSS Modal — Pure CSS modal windows

 

http://drublic.github.io/css-modal/

 

 

CSS Modal lets you build modal windows entirely in CSS, without any JavaScript necessary. It works with all screen sizes, and can even be used as a Sass plugin.

css modals

 

Homepage: http://drublic.github.io/css-modal/
GitHub: https://github.com/drublic/css-modal

 

Built with pure CSS

CSS Modal is built out of pure CSS. JavaScript is only for sugar. This makes them perfectly accessible.

Optimized for mobile

The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.

Use as Sass plugin

You can use CSS Modal as Sass plugin and apply it to your custom classes. No need to understand all the code.

A few other advantages: accessible, cross-browser, media-adaptive, small and fast!

 

 

Posted by 홍반장水 홍반장水
TAG css, modal

13 Very Useful jQuery Modal Plugins

http://www.smashingapps.com/2013/03/14/13-very-useful-jquery-modal-plugins.html

 

Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Simple Modal

SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content. SIMPLEMODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.

Lightview

Lightview was built to change the way you overlay content on a website.

jQuery.bPopup.js

bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.

LeanModal.js

Bare bones modal dialog windows.

jQuery SuperBox!

jQuery Superbox! is a script which allows you display windows with the lightbox effect.

Highslide JS

Highslide JS is an image, media and gallery viewer written in JavaScript.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

Reveal: jQuery Modals Made Easy

Reveal is awesome because it’s easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it’s fast, sexy and just works. Now let’s see how easy is can be to get Reveal working!

jQuery lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

PrettyPhoto is a jQuery lightbox

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

Simplemodal

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.



Read more: http://www.smashingapps.com/2013/03/14/13-very-useful-jquery-modal-plugins.html#ixzz2Nqjjf8ZL

Posted by 홍반장水 홍반장水