Modal

Furatto comes with a sleek, neat, yet powerful responsive modal for displaying messages, forms and more. You will

Building the markup

It is extremely easy to build a modal window, just two big elements playing around it, which are an anchor and a div.

  
<!--a link element to trigger the modal-->
<a class="button primary large" data-furatto="modal" data-target="#modal-1" data-transition="1" data-theme="alpha">Launch modal</a>

<!--the modal-->
<div class="modal" id="modal-1">
  <div class="modal-header">
    Modal Dialog
  </div>
  <div class="modal-content">
    <div>
      <p>This is a modal window. It has 3 main elements:</p>
      <ul>
        <li><strong>Header:</strong> The top text of the modal, could be used as a title.</li>
        <li><strong>Content:</strong> The actual content of the modal content.</li>
        <li><strong>Footer:</strong> Probably a bunch of actions, or just the close button.</li>
      </ul>
      <div class="modal-footer">
        <a class="modal-close button alpha primary">Close me!</a>
      </div>
    </div>
  </div>
</div>

A data attribute modal

You have to add some basic configuration to the anchor element, such as the plugin binding, modal target and much more...

Usage

Via data attributes

Add the data-furatto="modal" attribute to a button or link. It is necessary that you add a data-target="#myModal" attribute poiting to the modal.

  
 <a class="button primary large" data-furatto="modal" data-target="#modal-1">Launch modal</a>

Via javascript

You can show or hide a modal by calling the show or the hide function, like so:

  
  $('#modal').modal('show');
  $('#modal').modal('hide');

Standalone modal

Recently we discover a tiny bug, which didn't let the modal live without the anchor element. But thanks to @kurenn that is not a problem anymore. If you want to use the modal with pure javascript, let's say to show it after and ajax call, you probably would call something like:

  
  $('#modal').modal('show');

The problem in here was, that the modal wasn't showing as expected, see the issue on github. If you are taking this approach just keep in mind you'll have to set the same configuration for transition, theme to the '.modal' element, and be sure you add the data-furatto="modal" attribute. An example is provided below:

  
   <div class="modal" id="modal-1" data-furatto="modal" data-theme="alpha" data-transition="3">
      <div class="modal-header">
        Modal Dialog
      </div>
      <div class="modal-content">
        <div>
          <p>This is a modal window. It has 3 main elements:</p>
          <ul>
            <li><strong>Header:</strong> The top text of the modal, could be used as a title.</li>
            <li><strong>Content:</strong> The actual content of the modal content.</li>
            <li><strong>Footer:</strong> Probably a bunch of actions, or just the close button.</li>
          </ul>
          <div class="modal-footer">
            <a class="modal-close button alpha primary">Close me!</a>
          </div>
        </div>
      </div>
    </div>

Options

There are several options you can pass via data attributes to the modal plugin, just by appending the option name to data-, as in data-target.

Name	Type	Default	Description
target	string	You should set it up.	Id of the modal with a # symbol appended
transition	number	"1"	It's the transition you want in the modal, goes from 1 to 6. Really cool mate!
theme	string	"default"	It is the theme you want to use for the modal, currently Furatto comes with 4 different ones, primary, danger, default, alpha.

Available sass variables

You can easily change the default modal css rules by overwriting our variables.

  
//General settings
$modal-width: 80% !default;
$modal-z-index: 1050 !default;
$modal-color: #FFF !default;
$modal-top-position: px-to-rems(80) !default;
$modal-position: absolute !default;

//Modal styles
$modal-primary-background-color: #3498DB !default;
$modal-default-background-color: #F0F0F0 !default;
$modal-danger-background-color: #E74C3C !default;
$modal-funky-background-color: #9b59b6 !default;
$modal-warning-background-color: #e67e22 !default;
$modal-success-background-color: #2ecc71 !default;
$modal-info-background-color: #34495e !default;

//Modal content
$modal-content-padding: px-to-rems(15) px-to-rems(40) px-to-rems(30) !default;
$modal-content-font-weight: 300 !default;
$modal-content-font-size: px-to-rems(18) !default;
$modal-content-ul-padding: 0 0 px-to-rems(30) px-to-rems(20) !default;
$modal-content-list-item-padding: px-to-rems(5) 0 !default;

//Overlay
$modal-overlay-z-index: $modal-z-index - 10 !default;
$modal-overlay-background: #000 !default;
$modal-overlay-background-opacity: 0.8 !default;
$modal-overlay-show-opacity: 1 !default;

//Header
$modal-header-padding: px-to-rems(6) !default;
$modal-header-text-align: center !default;
$modal-header-font-size: px-to-rems(38) !default;
$modal-header-font-weight: $modal-content-font-weight !default;
$modal-header-background-color: #000 !default;
$modal-header-opacity: 0.8 !default;

//Modal variations
$modal-radius: px-to-rems(3) !default;

//Modal footer
$modal-footer-padding: px-to-rems(10) 0 !default;

//Modal extra themes
$include-modal-extra-themes: false !default;
$include-fade-in-scale-up-effect: true !default;
$include-slide-from-right-effect: true !default;
$include-slide-from-bottom-effect: true !default;
$include-fall-effect: true !default;
$include-slide-stick-effect: true !default;
$include-super-scaled-effect: true !default;

Further info

We provide some mixins for you to play around, also we recommend you to visit the sass source file.

Search for documentation