Hypermodal/1.1

by Yuki KAN / Akkarin

Overview

Hypermodal is a simple, modal-view class library for pure JavaScript applications.

Hypermodalは、Pure JavaScriptアプリケーションのためのシンプルなモーダルビュークラスライブラリです。

Features

Example

Here are some examples of Hypermodal.


Example 1

The most simple example.

» Click to create this modal
					new Hypermodal({
						title      : 'Example 1',
						content    : '\アッカリ~ン/'
					}).render();

Example 2

Button customization example.
» Click to create this modal
					var modal = new Hypermodal({
						disableCloseByMask: true,
						title      : 'Example 2',
						description: 'Button customization example',
						content    : '和我定签约当魔法少女吧',
						onClose    : function() {
							new Hypermodal({title:'See you!', body:'Example 2 is closed.'}).render();
						},
						buttons    : [
							{
								label  : 'Yes',
								onClick: function() {
									modal.buttons[0].disable();
									modal.buttons[1].disable();
									modal.buttons[2].enable();
								}
							},
							{
								label  : 'No thanks',
								color  : '@red',
								onClick: function() { modal.close(); }
							},
							{
								label   : 'Homuhomu',
								color   : '#9750fa',
								disabled: true,
								onClick : function() {
									modal.buttons[0].enable();
									modal.buttons[1].enable();
									modal.buttons[2].disable();
								}
							}
						]
					});
					
					modal.render();

Example 3

Long content and auto-scaling example.
» Click to create this modal
					var a = (
						'' +
						''
					);
					
					var longContent = new Element('div').insert(a);
					
					longContent.setStyle({
						textAlign : 'center',
						background: '#fee6f8',
						padding   : '10px'
					});
					
					var modal = new Hypermodal({
						modalWidth : '320px',
						title      : 'Example 3',
						description: 'Long content and auto-scaling example',
						content    : longContent,
						buttons    : [
							{
								label  : 'OK',
								onClick: function() { modal.close(); }
							},
							{
								label   : 'Lengthen',
								color   : '@red',
								onClick : function() {
									longContent.insert(a);
								}
							}
						]
					});
					
					modal.render();

How to use

Hypermodal is using Prototype JavaScript framework. so please load it before using Hypermodal.


The basic structure of Hypermodal.

			var modal = new Hypermodal({
				// basic options to here
				modalWidth        : '100%',
				disableCloseByMask: true,
				disableCloseButton: true,
				title  : 'blah',
				content: 'yadda',
				// events
				onBeforeClose: function(){...},
				onClose      : function(){...},
				onRendered   : function(){...},
				// buttons
				buttons: [
					{
						label   : 'Yes',
						color   : '@blue',
						onClick : function() { modal.close(); }
					}
				]
			});
			
			modal.render();//<-- render to element (default: body)

Reference

Basic

Name Type Default Description
title string "" title of modal
description string "" description of modal
content string, element "" content of modal
buttons array [] array of button objects... [{}]
modalID string, null null attribute of modal container div id
modalClass string "hypermodal" attribute of modal container div class
modalWidth string "500px" style of modal width
tableHeight string "auto" style of modal height
disableCloseButton boolean false disable "×" button
disableCloseByMask boolean false disable close by mask
onRendered function, null null Event call a function when the rendering is complete
onBeforeClose function, null null Event call a function when the before close
Hint: If when returned false, cancel closing.
onClose function, null null Event call a function when the close

Basic Methods

Name Arguments Return Description
render (object)element (default:body) - render to element.
close - - Close modal.
Button
Name Type Default Description
label string No default Important label of button
color string "" color of button
Hint: When use the "@xxxxxx", .hypermodal-button-color-xxxxxx will be applied.
Default defined colors: @red, @blue, @green, @orange
disable boolean false disable button
onClick function undefined Event call a function when click button
Arguments: event object
Button Methods
Name Arguments Return Description
enable - - enable button.
disable - - disable button.

Download

Hyperpack New!

Contact

For anything non-support related you can contact me at akkarinely.jp or @kanreisa. I don't have the time to answer every support related email individually.