creating modal dialogs with overlay

8/13/2019 Creating Modal Dialogs With Overlay

1/3

24/12/13 Creating modal dialogs with overlay

jquerytools.org/demos/overlay/modal-dialog.html 1/3

Home Demos Documentation Forums Download

Creating modal dialogs w ith overla yThis demo shows you how you can use the overlay tool to p rompt for use r input. You may befamiliar with the old school prompt() call in JavaScript. Now let's get into the modern world anduse JavaScript more innovatively:

You clicked no User input

standalone demo

The "Modal dialog" is an overlay that requires the user to int eract with it bef ore they can returnto using the main document. This feature can be achieved w ith the Expo se tool which is tightlyintegrated with this overlay tool.

There are two major advantages over the default JavaScript prompts:

1. You can tweak the look and feel of the dialog box2. You can ask any kind of questions and have multiple input fields.

HTML coding

gain, the HTML coding is no different from the basic setup . There are trigger elements and theircorrespo nding overlay element s. Note that we have ex plicitly defined the close buttons here byassigning the class name "close" to the buttons. This will automatically bind the close actions to them.

Ui Tools

Form Tools

Tabs

Minimal setup for tabs

Naming the tabs

4 different skins with CSS

Using mouseover to switch tabs

Making wizards with the tabs

Making accordions with tabsCustomizing the accordion effect

Horizontal accordion using the tabs

Multiple tabs and accordion instances

Handling browsers back button

Loading tab contents with ajax

AJAXed tabs with history support

Slideshow plugin for the tabs

Tooltips

Basics of using the tooltip

Using any HTML inside the tooltip

Imitating browsers default tooltipUsing tooltips in form fields

Using tooltips in tables or lists

Custom tooltip e ffect

Dynamic positioning of the tooltip

Overlay

Minimal setup for overlay

The apple effect for overlay

Creating modal dialogs with overlay

Opening overlays programmatically

Overlays with different styles

Loading external pages into overlayMultiple overlays on the same page

Creating a customized overlay effect

Scrollable

Minimal setup for scrollable

A vertical scrollable

A simple scrollable image gallery

Gallery with multiple scrollables

A scrollable registration wizard

Scrollable plugins in action

Browser back button navigation

jQuery tools home page setupA complete navigational system

Add and remove items from scrollable

Customizing the scrolling animation

Search site

Yes or no?

User input

This is a modal dialog

You can only interact with elements that are inside this dialog.

To close it click a button or use the ESC key.

Yes

No
http://jquerytools.org/demos/tooltip/dynamic.htmlhttp://jquerytools.org/demos/tooltip/form.htmlhttp://jquerytools.org/demos/tooltip/any-html.htmlhttp://jquerytools.org/demos/tabs/mouseover.htmlhttp://jquerytools.org/demos/tabs/skins.htmlhttp://jquerytools.org/demos/tabs/skins.htmlhttp://flowplayer.org/http://jquerytools.org/http://jquerytools.org/http://jquerytools.org/demos/scrollable/easing.htmlhttp://jquerytools.org/demos/scrollable/edit.htmlhttp://jquerytools.org/demos/scrollable/site-navigation.htmlhttp://jquerytools.org/demos/scrollable/home.htmlhttp://jquerytools.org/demos/scrollable/one-sized.htmlhttp://jquerytools.org/demos/scrollable/plugins.htmlhttp://jquerytools.org/demos/scrollable/wizard.htmlhttp://jquerytools.org/demos/scrollable/multiple-scrollables.htmlhttp://jquerytools.org/demos/scrollable/gallery.htmlhttp://jquerytools.org/demos/scrollable/vertical.htmlhttp://jquerytools.org/demos/scrollable/index.htmlhttp://jquerytools.org/demos/overlay/custom-effect.htmlhttp://jquerytools.org/demos/overlay/multiple.htmlhttp://jquerytools.org/demos/overlay/external.htmlhttp://jquerytools.org/demos/overlay/styling.htmlhttp://jquerytools.org/demos/overlay/trigger.htmlhttp://jquerytools.org/demos/overlay/modal-dialog.htmlhttp://jquerytools.org/demos/overlay/apple.htmlhttp://jquerytools.org/demos/overlay/index.htmlhttp://jquerytools.org/demos/tooltip/dynamic.htmlhttp://jquerytools.org/demos/tooltip/custom-effect.htmlhttp://jquerytools.org/demos/tooltip/table.htmlhttp://jquerytools.org/demos/tooltip/form.htmlhttp://jquerytools.org/demos/tooltip/imitate.htmlhttp://jquerytools.org/demos/tooltip/any-html.htmlhttp://jquerytools.org/demos/tooltip/index.htmlhttp://jquerytools.org/demos/tabs/slideshow.htmlhttp://jquerytools.org/demos/tabs/ajax-history.htmlhttp://jquerytools.org/demos/tabs/ajax.htmlhttp://jquerytools.org/demos/tabs/history.htmlhttp://jquerytools.org/demos/tabs/multiple.htmlhttp://jquerytools.org/demos/tabs/accordion-horizontal.htmlhttp://jquerytools.org/demos/tabs/accordion-custom.htmlhttp://jquerytools.org/demos/tabs/accordion.htmlhttp://jquerytools.org/demos/tabs/wizard.htmlhttp://jquerytools.org/demos/tabs/mouseover.htmlhttp://jquerytools.org/demos/tabs/skins.htmlhttp://jquerytools.org/demos/tabs/anchors.htmlhttp://jquerytools.org/demos/tabs/index.htmlhttp://jquerytools.org/demos/overlay/index.htmlhttp://jquerytools.org/tools/toolbox/expose.htmlhttp://jquerytools.org/demos/overlay/modal-dialog.htmhttp://jquerytools.org/downloadhttp://jquerytools.org/forum/toolshttp://jquerytools.org/documentationhttp://jquerytools.org/demoshttp://jquerytools.org/http://jquerytools.org/http://flowplayer.org/


2/3



SS coding

Nothing special here. We style the dialog and a few elements inside it:

avaScript coding

First we enable those trigger elements to open our dialogs. We select the elements with the jQueryselector .modalInput and initialize overlaying with two configuration variables. The mask variableenables the semitransparent mask and we give it the color "#ebecff". By setting closeOnClick variableo false we enable our "modal" feature: users cannot interact with the main document when the

overlay is open because the rest of the document is disabled by the mask until the dialog is closed.

Toolbox

report a bug

What's new in v1.2.7

Read the book

The new jQuery Tools book by Alex Libbyexplores the library in a precise andstructured fashion. If you are gettingstarted on jQuery Tools or looking forbetter ways to use the library, this bookwill be your ally.

Our CDN sponsor

This is a modal dialog

You can only interact with elements that are inside this dialog.

To close it click a button or use the ESC key.

OK

Cancel

HTML

.modal {

background-color : #fff ;

display : none ;

width : 350px ;

padding : 15px ;

text-align : left ;

border : 2px solid #333 ;

opacity : 0 . 8 ;

-moz- border -radius: 6px ;

-webkit- border -radius: 6px ;

-moz-box-shadow: 0 0 50px #ccc ;

-webkit-box-shadow: 0 0 50px #ccc ;

}

.modal h2 {

background : url(/media/img/global/info.png) 0 50 % no-repeat ;

margin : 0px ;

padding : 10px 0 10px 45px ;

border-bottom : 1px solid #333 ;

font-size : 20px ;

}

CSS

var triggers = $( ".modalInput" ).overlay({

// som e m ask twe aks sui tab le for mod al dia log s

mask: {

color: '#ebecff' ,

loadSpeed: 200 ,
http://www.maxcdn.com/http://www.amazon.com/exec/obidos/ASIN/1849517800/http://jquerytools.org/release-notes/version-1.2.x.htmlhttp://jquerytools.org/release-notes/index.htmlhttps://github.com/jquerytools/jquerytools/issueshttp://api.jquery.com/category/selectors/


3/3



es/No prompt

Here is the code for the yes/no prompt. We bind a click event to both buttons and we know which oneof the buttons is clicked by using jQuery's index method. After we know the result we simply write theanswer to the trigger. Of course you should do something more useful with the result.

Input prompt

Here we bind a submit event handler for the FORM element inside the dialog. This handler closes theoverlay by using the overlay API call close . The default form submission action can be cancelled byreturning e.preventDefault() .

Twitter feed | github: tools / website | report a bug | Accelerated by MaxCDN

opacity: 0.9

},

closeOnClick: false

});

Java Script

var buttons = $( "#yesno button" ).click( function (e) {

// get use r i npu t

var yes = buttons.index( this ) === 0;

// do som eth ing wit h t he ans wer

triggers.eq( 0 ).html( "You clicked " + (yes ? "yes" : "no" ));

});

Java Script

$( "#prompt form" ).submit( function (e) {

// clo se the ove rla y

triggers.eq( 1 ).overlay().close();

// get use r i npu t

var input = $( "input" , this ).val();

// do som eth ing wit h t he ans wer

triggers.eq( 1 ).html(input);

// do not sub mit the for m

return e.preventDefault();

});

Java Script
http://www.maxcdn.com/https://github.com/jquerytools/jquerytools/issueshttps://github.com/jquerytools/sitehttps://github.com/jquerytools/jquerytoolshttp://twitter.com/jquerytools

creating modal dialogs with overlay

Documents