The jQuery modal window examples below cover most of the properties found on the software, offering you interesting hints and ideas on how to create your own useful and stylish modal windows (dialogs) for your web pages:
Click below to see a Modal Window displaying a
single image:
Click below to see different
styles of
"single-sheet" modal windows:
Example 1
Example 2
Example 3
(you can fully customize all areas, with your own colors, images, CSS, etc.)
Embedded Modal Window- click to see a Modal Window whose content
is specified within the application and retrieved from the project's
compiled file.
The following is an
Image Map (product-related image with
hotspots).
Each separate area on the map opens a different modal window per product:
Click below to see
thematic Modal Windows, using stylish frames
from our Photo Frame Show service:
The following is an
Image Map (image with
hotspots), where each island is a separate area on the map.
Click on any island (area) to open a different modal window per island:
(for "how-to" instructions view "Example 18" in the application)
HTML file- click to see a Modal Window whose content is
another HTML file
of this website, accessed with
AJAX technology.
- click to see a Modal Window with no footer.
Closing Options- click to see a Modal Window that includes all available
closing options (images, 'Esc', overlay and custom areas).
- click to see a Modal Window with header (and footer).
Click below to see a Modal Window displaying a
YouTube video.
See Modal Windows whose content is a hidden
Page Element
(an element existing inside this page's HTML code, as you can see with "view source"):
- A hidden Form element of this page - Hidden Form
- A hidden Paragraph element of this page - Hidden Paragraph
- A hidden Div element of this page - Hidden Element
Download Likno Web Modal Windows Builder
This is the content of a hidden paragraph.
Find this paragraph inside the HTML code of this page (use "view source").
In this example the content is a hidden page element (a <p> that uses "display:none" on its style) and appears here when the modal window also appears.
The paragraph's "Page Element ID" is: hidden_paragraph_page_element
(this ID you enter inside the application to identify this page element)
This is the content of a hidden div.
Find this div inside the HTML code of this page (use "view source").
In this example the content is a hidden page element (a <div> that uses "display:none" on its style) and appears here when the modal window also appears.
The div's "Page Element ID" is: hidden_div_page_element
(this ID you enter inside the application to identify this page element)