A set of modal, dialog and tooltip using only CSS3.
Get floatparts.css and floatparts.min.css from here or bower.
<link rel="stylesheet" href="/path/to/floatparts.css">
bower install css-floatparts
<link rel="stylesheet" href="https://cdn.rawgit.com/nabeix/css-floatparts/master/build/floatparts.min.css">
A modal is created by adding the .flp-modal
class to any <div>
element.
The content of the modal should be in the .flp-modal.content
.
Initially, the modal is hidden. To show the modal, add the .flp-show
class.
<div class="flp-modal flp-show">
<div class="content">
<div class="header">
<h3>Modal header</h3>
</div>
<div class="body">
Modal body
</div>
<div class="footer">
Modal footer
</div>
</div>
</div>
.header
, .body
and .footer
are optional.
A dialog is created by adding the .flp-dialog
class to any <div>
element.
Initially, the dialog is hidden. To show the dialog, add the .flp-show
class.
<div class="flp-dialog flp-show">
<div class="header">
<h3>Modal header</h3>
</div>
<div class="body">
Modal body
</div>
<div class="footer">
Modal footer
</div>
</div>
.header
, .body
and .footer
are optional.
A tooltip is created by adding the tooltip class (e.g. .flp-tooltip-top
) to any element. And the .tooltip-holder
class need to be added to the element has the tooltip.
As default, the tooltip is shown by adding the .flp-show
class to the tooltip element. Instead of the .flp-show
class, the .flp-enable-hover
class elables the tooltip to show automatically by mouse hover.
<div class="flp-tooltip-holder">
tooltip example
<span class="flp-tooltip-right flp-enable-hover">tooltip here</span>
</div>
The .flp-modal
class and the .flp-dialog
class supports the following animation classes.
.flp-animation-slide-down
(default).flp-animation-slide-up
.flp-animation-slide-left-in
.flp-animation-slide-right-in
<div class="flp-dialog flp-animation-slide-left-in">
...
</div>
To disable default animation, add the .flp-animation-none
class.
We use Node.js, Gulp and Sass to build CSS Floatparts.
$ git clone git@github.com:nabeix/css-floatparts.git
$ cd css-floatparts
$ gem install sass
$ npm install
$ gulp
MIT