Search within TutorialsPark

Twitter Bootstrap Modals


To display content in a child window layered over the parent window


Twitter Bootstrap: Modals

1. The purpose of a modal is to have content from an outside source and have some interaction with the user without having to leave the parent window

2. They can be used as a window to display slideshows, user login/registration , advertising etc.

3. Two classes are important while creating a modal

First .modal which identifies a <div> element as a modal

Second is .fade which causes the content to fade in and fade out when modal is toggled.

Example: Twitter Bootstrap Modals

Give it a TRY! »

Twitter Bootstrap: Trigger Modals using Data Attributes(No Javascripts)

1. A modal can be invoked via data-attributes by setting data-attribute data-toggle="modal" within the trigger element(usually button).

2.The tigger is attached to the modal window using attribute href="#selector". Here selector is the ID or Class of the modal

Example:Twitter Bootstrap Modal using data-attributes.

Give it a TRY! »

Twitter Bootstrap: Large Modal

1. The Modals have two size options, the size is specifed via modifier class and is placed on a .modal-dialog.

2. To create a large modal use class .modal-lg with .modal-dialog

Example:Twitter Bootstrap Large Modals

Give it a TRY! »

Twitter Bootstrap: Small Modals

2. To create a small modal use class .modal-sm with class .modal-dialog

Example:Twitter Bootstrap small Modals

Give it a TRY! »

Twitter Bootstrap: Modal Javascript Method $().modal(options)


Table:Twitter Bootstrap Tooltips Options

Name Type Default Description
backdrop boolean or the string true To apply a fade transition to popover using CSS
keyboard boolean true To insert HTML elements within the popover
show boolean true To set the position of the tooltip - top | bottom | left | right | auto. The value auto lets the browser reorient the popover dynamically
remote path false Delegate popover objects to specific targets

1.To Activate content as a modal and then accept an optional object as options

Example:Twitter Bootstrap Modal Javascript $().dropdown(options)

Give it a TRY! »

Twitter Bootstrap: Modal Javascript Method $().modal('toogle')


1.To Manually toggle a modal .

Example:Twitter Bootstrap Javascript Modal Method $().dropdown('toggle')

Give it a TRY! »

Twitter Bootstrap: Modal Javascript Method $().modal('show')


1.To Manually open a Modal .

Example:Twitter Bootstrap Modal Javascript Method $().modal('show')

Give it a TRY! »

Twitter Bootstrap: Modal Javascript Method $().modal('hide')


1.To Manually hide or close a Modal .

Example:Twitter Bootstrap Modal Javascript Method $().dropdown('hide')

Give it a TRY! »

Twitter Bootstrap: Modal Events


Table:Twitter Bootstrap Tooltip Events

Event Type Description
show.bs.modal The event is fired immediately when the show instance method is invoked.
shown.bs.modal The event is fired when the modal is show to the user(CSS delays are considered).
hide.bs.modal The event is fired immediately when the hide instance method is invoked.
hidden.bs.popover Fired immediately when the modal gets hidden.
loaded.bs.popover Fired immediately when the modal has loaded content using the option remote.


1.The element <blockquote> is to denote quotes from an outside source .

2.The source is specified using <small> element and the name of the source is specified using <cite> element.

Example:Twitter Bootstrap Modal Javascript Events

Give it a TRY! »