Penguin

Modal

A modal is a dialog prompt, like a pop-up window, that temporarily blocks interactions with the site.

##Full screen modal

 $('body').modal({
  content: '<div class="modal__header"><h1 class="h2">Modal Title</h1><button type="button" title="close" data-close="modal" class="modal__close"><i class="icon icon--close" aria-hidden="true"></i><span class="invisible">close</span></button></div><div class="modal__body" data-region="modal-body">Modal Content</div><div class="modal__footer"><div class="btn-group align-right"><button type="button" class="btn btn--primary" data-close="modal">Accept</button></div></div>'
});

##Target modal

$('.demo--target').modal({
  content: '<div class="modal__header"><span class="h2">Modal Title</span><button type="button" title="close" data-close="modal" class="modal__close"><i class="icon icon--close" aria-hidden="true"></i><span class="invisible">close</span></button></div><div class="modal__body" data-region="modal-body">Modal Content</div><div class="modal__footer"><div class="btn-group"><button type="button" class="btn btn--primary" data-close="modal">Accept</button></div></div>'
});

Ajax Modal

<button class="btn btn--primary" data-rel="modal" data-target="body" data-ajax="{ url: 'content.html'}">Ajax Modal</button>

##How to use

###Show modal by click event

<button data-rel="modal" data-target="selector" data-modal="{options}" data-ajax="{ajaxSettings}">Modal</button>

###Show modal in loaded page

<div data-rel="modal-init" data-modal="{options}" data-ajax="{ajaxSettings}"></div>

Don’t forget to add [data-rel] attribute.

data-rel Description
modal Shows the content in a modal component
modal-init Shows the content in a modal component when the page is loaded.
data-target (optional) Description Default
selector Shows the content in a modal component ‘body’
data-modal Type Description Default value
transitionDuration number Css transition duration. If transition is removed set to 0 350
classModifier string Adds a class modifier in the modal component. ’’
backdrop boolean Adds a overlay behind to the modal. true
backdropClassName string Set this class to backdrop ‘modal–backdrop’
show boolean Shows the component after creating the model object. false
closeable boolean The modal can be closed by clicking out of it. true
content string Set modal content with custom html ’’
data-ajax (optional) Type Description Default value
ajaxSettings object Sets jQuery “ajaxSettings” jquery.ajax

##javaScript

$(‘target’).modal({options});

$('body').modal({
    backdrop      : false,
    closeable     : false,
    content       : '<div>Content</div>'
});
$('body').modal({
    ajaxSettings  : {
      url: 'content.html'
    }
});
$('target').modal('show');
$('body').modal('show');
$('target').modal('hide');
$('body').modal('hide');

###events

The modal’s target which receives the event.

Event type Description Target
modal:show This event is fired when the modal is shown. relatedTarget or document
modal:hide This event is fired when the modal is hidden. relatedTarget or document
modal:ajaxLoaded This event is fired when the ajax content is loaded. relatedTarget or document
// Create a modal
var myModal = $.penguin.modal({closeable: false}, '.panel');

// Show the created modal
myModal.show();

// Hide the created modal
myModal.hide();

###example

// Default target
$('body').on('modal:show', function() {});

// Custom target
$('.myDiv').on('modal:hide', function() {});

// Default target
$('body').on('modal:ajaxLoaded', function() {});

###creating modal objects

$.modal({options}, [target]);

###Theme definition

.modal {}

  .modal__dialog {}

    .modal__dialog__content {}

  .modal__header {}

  .modal__body {}

  .modal__footer {}

.modal--backdrop {}

##Animated

You can easily add CSS3 transition to modal when appears and disappears on the screen. You can do it through transition class. Check the next example:

.modal {
  opacity: 0;
  pointer-events: none;
  @include transition(opacity, .3s);

  &.transition {
    opacity: 1;
    pointer-events: auto;
  }

}