If you have a web site with lots of pages and you want to list them with
direct access, you may want to consider adding some sort of pagination to each
page.
This makes for a conservative way to create a simple page numbering system as
a navigational element for documents.
A modal is a dialog box/popup window that is displayed on top of the current
page like a shade with a transparent background. The use of the modal element
allows for creative ways to bring up message elements.
×
Modal Header
Welcome
What you are currently reading is displayed in a new
element called a modal. It is an element that may be manually triggered and
provide a means to provide information to a user or visitor of your site.
Go back to W3.CSS to return to the beginning of this chapter.
How To Create A Modal
Example
<!-- Trigger/Open the Modal
-->
<button onclick="document.getElementById('id01').style.display='block'"
class="btn">Open Modal</button>
<!-- The Modal -->
<div id="id01" class="modal">
<div class="modal-content">
<div class="container">
<span onclick="document.getElementById('id01')
.style.display='none'"
class="closebtn">×</span> <p>Some text in the Modal..</p> <p>Some text in the Modal..</p> </div>
</div>
</div>
A modal is any HTML container (like a <div>) with
class="modal".
The "modal-content" Class
All modal content should be placed in an HTML container with
class="modal-content".
Modal content can be any HTML element (headings, paragraphs, images,
etc.)
Open a Modal
Use any HTML element to open the modal. This is often a button or a link.
Add the onclick attribute and point to the id of the modal
(id01 in our example), using the document.getElementById() method and
specify a unique ID that matches the "trigger" button (id01).
NOTE: Do not use the same id numbers for more than one element on the same
page, it will create a conflict and keep them from running!
Closing a Modal
To close a modal, add the closebtn class to an element
together with an onclick attribute that points to the id of the modal
(id01). Appearantly the use of the little (x) is fairly common, (even
unlabled). As you can see by this example that there are some things that are
pretty much taken for granted as being commonly understood.
× (×) is an HTML entity that is the preferred icon for close
buttons, rather than the letter "x".
Modal Header & Footer
Inside the <div> with class="modal-content", use
container classes to create different sections in the
modal:
Use any of the animate-top|bottom|right|left classes to
slide in the modal from a specific direction:
×
Modal Header
In the event you haven't noticed. The Modal is an overlay over the existing
page, therefor the page in the background is still running. Eventhough you
cannot access any controls on the page directly, it can still be navigated using
the scroll bar or access previous pages via the browser's back button.
×
Modal Header
Naturally the size, tranparency, container color and text attributes are all
adjustable in CSS. Options such as one-time attributes such as unique
text-colors or sizes, content and various other things are done right in the
Modal element.
×
Modal Header
A word of advice, just as many of the other elements you are being introduced
to in this class, this element can get very tricky.
It is strongly advised that you pay attention to what you are doing including
keeping track of all the changes you make, ESPECIALLY on the stylesheet.
It is possible to inadvertantly make entries and changes that contradict and
create conflicts with other elements.
Tooltips display text (or other content) when you hover over an HTML
element.
Inline Tooltip Text
Hover over the sentence below!
London 9 million is the
capital city of England.
The tooltip class defines the HTML element to hover over
(tooltip container).
The text class defines the tooltip text:
Because of how tightly packed the text and the coinciding tags will be in
order to achieve this effect, it is advised that you check and double check the
spacing between words and tags.
Example
<p class="tooltip">London
<span class="text">9 million</span>
is the capital city of England</p>
Wikipedia defines a car as a wheeled, self-powered motor vehicle used for
transportation. Some cars though are not meant to be just simple
transportation. Pictured is BMW 5 Series sedan, an example of impeccable teutonic
engineering.
The tooltip class defines the HTML element to hover over
(tooltip container).
The text class defines the tooltip text:
Example (text before the picture)
<div class="tooltip">
<p class="text">A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
<p class="text">A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
W3.CSS supports a 12 column responsive fluid grid.
Resize the page to see the effect!
1
2
3
4
5
6
7
8
9
10
11
12
This part will occupy 12 columns on a small screen, 4 on a medium screen, and
3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and
9 on a large screen.
1
2
3
4
5
6
7
8
9
10
11
12
Example
<div class="row">
<div class="col m4 l3">
<p>
I will occupy 12 columns on a small screen, 4 on a medium
screen, and 3 on a large screen.
</p>
</div>
<div class="col m8 l9">
<p>
I will occupy 12 columns on a small screen, 8 on a medium
screen, and 9 on a large screen.
</p>
</div>
</div>
