Dialog header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Close

CSS Floatparts

A set of modal, dialog and tooltip using only CSS3.

Fork me on GitHub

Demo

Modal

Open Demo Modal

A modal is created by adding the .flp-modal class to any <div> element. The content of the modal should be in the .content class. 

<div class="flp-modal">
    <div class="content">
        <div class="header">
            <h3>Dialog header</h3>
        </div>
        <div class="body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
        </div>
        <div class="footer">
            <a id="modal-close-btn">close</a>
        </div>
    </div>
</div>

To show modal, add the .flp-show class to the modal element. The following code is an example of adding/removing the .flp-show class using jQuery. 

$("#modal-open-btn").bind("click", function() {
    $("#modal").addClass("flp-show");
});
$("#modal-close-btn").bind("click", function() {
    $("#modal").removeClass("flp-show");
});

Dialog

Open Demo Dialog

A dialog is created by adding the .flp-dialog class to any <div> element. 

<div class="flp-dialog">
    <div class="header">
        <h3>Dialog header</h3>
    </div>
    <div class="body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
    </div>
    <div class="footer">
        <a id="dialog-close-btn">close</a>
    </div>
</div>

To show modal, add the .flp-show class to the dialog element. The following code is an example of adding/removing the .flp-show class using jQuery. 

$("#dialog-open-btn").bind("click", function() {
    $("#dialog").addClass("flp-show");
});
$("#dialog-close-btn").bind("click", function() {
    $("#dialog").removeClass("flp-show");
});

Tooltip

Tooltips appear by mouse hover tooltip top tooltip top-left tooltip top-right tooltip bottom tooltip bottom-left tooltip bottom-right tooltip left tooltip right

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 holder
    <span class="flp-tooltip-top flp-enable-hover">
        Tooltip text
    </span>
</div>

Animations

The .flp-modal class and the .flp-dialog class support the following animation classes.