ch.Modal
Description
Modal is a dialog window with an underlay.
How-to
// Create a new Modal.
var modal = new ch.Modal([el], [options]);
// Create a new Modal.
var modal = new ch.Modal([options]);
// Create a new Modal with disabled effects.
var modal = new ch.Modal({
'content': 'This is the content of the Modal'
});
// Create a new Modal using the shorthand way (content as parameter).
var modal = new ch.Modal('http://ui.ml.com:3040/ajax');
Parameters
-
el
- HTMLElement : A HTMLElement to create an instance of ch.Modal. -
options
- Object : Options to customize an instance.-
addClass
- String : CSS class names that will be added to the container on the component initialization. -
fx
- String : Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn". -
width
- String : Set a width for the container. Default: "50%". -
height
- String : Set a height for the container. Default: "auto". -
shownby
- String : Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointertap". -
hiddenby
- String : Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "all". -
reference
- HTMLElement : It's a reference to position and size of element that will be considered to carry out the position. Default: ch.viewport. -
side
- String : The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center". -
align
- String : The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center". -
offsetX
- Number : Distance to displace the target horizontally. Default: 0. -
offsetY
- Number : Distance to displace the target vertically. Default: 0. -
position
- String : The type of positioning used. Its value must be "absolute" or "fixed". Default: "fixed". -
method
- String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET". -
params
- String : Params like query string to be sent to the server. -
cache
- Boolean : Force to cache the request by the browser. Default: true. -
async
- Boolean : Force to sent request asynchronously. Default: true. -
waiting
- String | HTMLElement : Temporary content to use while the ajax request is loading. Default: '<div class="ch-loading-large ch-loading-centered"></div>'. -
content
- String | HTMLElement : The content to be shown into the Modal container.
-
Extends
Properties
.Component#name
String
The name of a component.
.container
HTMLDivElement
The popover container. It's the element that will be shown and hidden.
.Modal#name
String
The name of the component.
.Popover#name
String
The name of the component.
.trigger
HTMLElement
The popover trigger. It's the element that will show and hide the container.
.uid
Number
A unique id to identify the instance of a component.
Methods
-
content
- String | HTMLElement : The content that will be used by modal. -
options
- Object : A custom options to be used with content loaded by ajax.-
method
- String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET". -
params
- String : Params like query string to be sent to the server. -
cache
- Boolean : Force to cache the request by the browser. Default: true. -
async
- Boolean : Force to sent request asynchronously. Default: true. -
waiting
- String | HTMLElement : Temporary content to use while the ajax request is loading.
-
-
data
- String : Set a height for the container. -
content
- String | HTMLElement : The content that will be used by popover. -
options
- Object : A custom options to be used with content loaded by ajax.-
method
- String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET". -
params
- String : Params like query string to be sent to the server. -
cache
- Boolean : Force to cache the request by the browser. Default: true. -
async
- Boolean : Force to sent request asynchronously. Default: true. -
waiting
- String | HTMLElement : Temporary content to use while the ajax request is loading.
-
-
data
- String : Set a width for the container.
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys an instance of Component and remove its data from asociated element.
// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;
.disable() → {component}
Disables an instance of Component.
// Disabling an instance of Component.
component.disable();
.enable() → {component}
Enables an instance of Component.
// Enabling an instance of Component.
component.enable();
.require() → {component}
Adds functionality or abilities from other classes.
// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');
.constructor()
Returns a reference to the constructor function.
.hide() → {modal}
Hides the modal container and the underlay.
// Close a modal
modal.hide();
.show(content, options) → {modal}
Shows the modal container and the underlay.
// Shows a basic modal.
modal.show();
// Shows a modal with new content
modal.show('Some new content here!');
// Shows a modal with a new content that will be loaded by ajax with some custom options
modal.show('http://domain.com/ajax/url', {
'cache': false,
'params': 'x-request=true'
});
.constructor()
Returns a reference to the constructor function.
.destroy() → {popover}
Destroys a Popover instance.
// Destroy a popover
popover.destroy();
// Empty the popover reference
popover = undefined;
.disable() → {popover}
Disables a Popover instance.
// Disable a popover
popover.disable();
.enable() → {popover}
Enables a Popover instance.
// Enable a popover
popover.enable();
.height(data) → {Number|popover}
Sets or gets the height of the container.
// Set a new popover height
component.height('300px');
// Get the current popover height
component.height(); // '300px'
.hide() → {popover}
Hides the popover container and deletes it from the body.
// Close a popover
popover.hide();
.isShown() → {Boolean}
Returns a Boolean specifying if the container is shown or not.
// Check the popover status
popover.isShown();
// Check the popover status after an user action
$(window).on(ch.onpointertap, function () {
if (popover.isShown()) {
alert('Popover: visible');
} else {
alert('Popover: not visible');
}
});
.refreshPosition() → {popover}
Updates the current position of the container with given options or defaults.
// Update the current position
popover.refreshPosition();
// Update the current position with a new offsetX and offsetY
popover.refreshPosition({
'offestX': 100,
'offestY': 10
});
.show(content, options) → {popover}
Shows the popover container and appends it to the body.
// Shows a basic popover.
popover.show();
// Shows a popover with new content
popover.show('Some new content here!');
// Shows a popover with a new content that will be loaded by ajax with some custom options
popover.show('http://domain.com/ajax/url', {
'cache': false,
'params': 'x-request=true'
});
.width(data) → {Number|popover}
Sets or gets the width of the container.
// Set a new popover width
component.width('300px');
// Get the current popover width
component.width(); // '300px'
Events
'destroy'
Emits when a component is destroyed.
// Subscribe to "destroy" event.
component.on('destroy', function () {
// Some code here!
});
'disable'
Emits when a component is disable.
// Subscribe to "disable" event.
component.on('disable', function () {
// Some code here!
});
'enable'
Emits when a component is enabled.
// Subscribe to "enable" event.
component.on('enable', function () {
// Some code here!
});
'ready'
Event emitted when the component is ready to use.
// Subscribe to "ready" event.
modal.on('ready', function () {
// Some code here!
});