CSS Modal Box

Pure CSS Modal Box, "responsive" with a pretty good browsers support: IE6 minimum! (See this demo here)

Prevents other CSS rules conflicts; animation with Hardware-Accelerated features; fully responsive with width and height support within all screen sizes.

This component template has been tested successfully in (real systems not from emulators):

• Internet Explorer 6 (see below);
• Internet Explorer 7 (see below);
• Internet Explorer 8 (even in regressive 'Compatibility View'; see below);
• Internet Explorer 9;
• Internet Explorer 10;
• Internet Explorer 11;
• Microsoft Edge (all versions);
• Internet Explorer (Microsoft Windows Phone 7.5 system);
• Safari 5.x;
• Safari Mobile;
• Opera 9.64 PC;
• Opera 11 Linux;
• Opera Mini (Microsoft Windows Phone 7.5 system);
• Internet Explorer Mobile (Microsoft Windows Phone 8.x system);
• Opera Mini for android, version 7.5.x;
• Opera Mini android (latest version);
• Opera Mini 14 for iOS;
• UC Browser (Mini or HD version for Android & normal version for PC);
• UC Browser 10.x for iOS;
• default browser in Android 2.3.6 (TO DO: font sizes need adaptation);
• FireFox 1.0.8 minimum;
• FireFox 52 ESR;
• Midori 0.4;
• Google Chromium (all versions: PC & Mac; iOS & Android);
• Brave;
• Vivaldi;
• Camino 2.1 Mac;
• Shiira Mac;
• OmniWeb 5 Mac.

Here is a new version with the use of Flexbox & CSS Grid Layout for hipsters and nerds keeping a pretty good support within old browsers: IE6 minimum capable. Please note these new CSS features in this web design sample do not act any kind of noticed advantages. Online latest demo

Usage

First, you need to encapsulate your entire content page into a div with a class name wrapper. Then, place the Modal Box template outside this wrapper block. Simple! Note. The default template is white and blue. For customization, see this sample here

This content package (v1.2 onward)

This minimal default component (required) is distributed in white/blue colors (see screen shots) and do not include the styles for inner optional elements within the modal header (File: modal-box.min.css).

In order to add these additional supports, please include the optional styles (File: custom.css).

A red colored example, well commented, is available for your customization convenience (File: template.css previously, file: custom.css). .

An independant demo.html file with full styles is available for integration example (File: demo.html).

Helpers for customization

This package is distributed with some class helpers:

• tiny: to create small width Modal Boxes (max-width: 20em) useful for login.
• push__left: to place the close button, or the entire Modal Box to the left;
• push__right: to place the entire Modal Box on the right;
• footer-push__left: to float the footer's links on the left;
• footer-push__center: to place the footer's links on the center;
• footer__reverse: to reverse the order of the footer's links;
• footer-push__block: to display all the footer's links empiled without the scroll bar (the footer adapts it's height accordingly);

See the templates for how tos integration.

Custom template sample

Remove all the code between <style> and </style> from the demo.html page, then add before the final </head> tag:

<link rel="stylesheet" href="css/modal-box.min.css" media="screen">
<!-- Facultative: for optional elements -->
<link rel="stylesheet" href="css/custom.min.css" media="screen">
<!-- Sample custom colors styling (overwrite default) -->
<link rel="stylesheet" href="css/template.css" media="screen">

.

Custom template FLATERIAL (v1.4 onward)

Remove all the code between <style> and </style> from the demo.html page, then add before the final </head> tag (or see the flaterial.html file):

<link rel="stylesheet" href="css/modal-box.min.css" media="screen">
<!-- Facultative: for optional elements -->
<link rel="stylesheet" href="css/custom.min.css" media="screen">
<!-- Sample custom colors styling (overwrite default) -->
<link rel="stylesheet" href="css/flaterial.css" media="screen">

.

Custom template for messaging (v1.5 onward)

See the file message-box.html for details:

.

Integration example

Here is an integration test within the default Textpattern template (v 4.7-dev) without any kind of conflicts even by putting the modal's styles at the beginning of the default.css file:

.

Note

CSS rules has been verified troughout the online "Validate your CSS for different browsers" (features providing by Caniuse): https://www.browseemall.com/Compatibility/ValidateCSS

Screen shots

See the 'png' images for all the different browsers.