Skip to content
This repository has been archived by the owner on Mar 2, 2019. It is now read-only.

Usage

Jump to bottom
WellingGuzman edited this page Sep 6, 2014 · 2 revisions

Modal [Draft]

Feel free to improve it, do corrections, fix typos, grammar mistakes, and so on.

In order to make use of Effeckt Modal you need to follow this steps.

1. Include the required files.

CSS

<link rel="stylesheet" type="text/css" href="./effeckt/modal.css">

Note: You still need to applied your own "style".

JavaScript

<!-- jQuery handle all the events and DOM manipulation -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- Core or Global stuff, mainly to know if we need a click or touch event -->
<script type="text/javascript" src="./effeckt/core.js"></script>
<!-- This object helps to control the modals, it's kind of optional, kind of -->
<script type="text/javascript" src="./effeckt/modal.js"></script>

Modal Structure

<div class="effeckt-wrap effeckt-modal-wrap [effeckt-type (Recommended)]" id="effeckt-modal-wrap">
  <div class="effeckt-content effeckt-modal" id="effeckt-modal">
    <h3>Modal Dialog</h3>
    <div class="effeckt-modal-content">
      <p>This is a modal window.</p>
      <button class="effeckt-modal-close">Close me!</button>
    </div>
  </div>
</div>

The effeckt type class is optional, but it's recommended to do it, so it prevents a ~300ms delay. If you prefer not to do it, add them as attribute on the trigger element.

Button to Trigger the Modal window

Add .effeckt-modal-button class to any element you want to trigger the modal. But what modal? by default it looks for #effeckt-modal-wrap you can overwrite it by add data-effeckt-trigger="[selector]" as attribute. What's the effeckt you want it to perform? if you do not want to add it as class on the modal element, you need to add it as attribute on the trigger button like this: data-effeckt-type="[effeckt-type]".

To close the modal, any element with .effeckt-modal-close class or `[data-effeckt-dismiss="modal"] attribute will close it.

Example:

<a href="#" class="effeckt-modal-button" data-effeckt-type="from-below" data-effeckt-trigger="#modalWindow">Open Modal</a>

All together would looks like this:

<!doctype html>
<html>
  <head>
    <title>Effeckt Modal Window</title>
    <link rel="stylesheet" type="text/css" href="./effeckt/modal.css">
  </head>
  <body>
    <a href="#" class="effeckt-modal-button">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-target="#effeckt-modal-wrap2">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-target="#effeckt-modal-wrap3">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-target="#effeckt-modal-wrap4">Open it</a>
    <a href="#" class="effeckt-modal-button" data-effeckt-type="from-above" data-effeckt-target="#effeckt-modal-wrap5">Open it</a>

    <div class="effeckt-wrap effeckt-modal-wrap from-below" id="effeckt-modal-wrap">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is a modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap tada" id="effeckt-modal-wrap2">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Second Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is a second modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap blur" id="effeckt-modal-wrap3">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Third Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is a third modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap deep-content" id="effeckt-modal-wrap4">
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Fourth Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is fourth a modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div class="effeckt-wrap effeckt-modal-wrap" id="effeckt-modal-wrap5"> <!-- for centering transform -->
      <div class="effeckt-content effeckt-modal" id="effeckt-modal">
        <h3>Fifth Modal Dialog</h3>
        <div class="effeckt-modal-content">
          <p>This is the fifth a modal window.</p>
          <button class="effeckt-modal-close">Close me!</button>
        </div>
      </div>
    </div>

    <div data-effeckt-page>
      page [main] content, some effeckt use this element
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="./effeckt/core.js"></script>
    <script type="text/javascript" src="./effeckt/modal.js"></script>
  </body>
</html>

Some effeckts like `deep-content` uses the "main page container" and they both get animated. so your main wrapper container you need to add the attribute `data-effeckt-page` in order to work as it's suppose to.
Clone this wiki locally