Icontem

tomloprod Modal: Create modal windows without using frameworks

Recommend this page to a friend!
  Info   Demos   Screenshots Screenshots   View files View files (12)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2017-02-01 (Yesterday) RSS 2.0 feedNot yet rated by the usersTotal: 65 This week: 9All time: 452 This week: 5Up
Version License JavaScript version Categories
tomloprodmodal 1.0.1Custom (specified...5HTML
Description Author

This object can create modal windows without using frameworks.

It can open modal windows inside given page elements with given options.

The object can configure several types of parameters like animage the modal window scaling it inside a given container element.

Innovation Award
JavaScript Programming Innovation award nominee
January 2017
Nominee
Vote
Modal windows are very useful to create user interfaces that grab the attention of the user by preventing them to access the rest of the Web page elements.

There are many Web modal window creation components but many of them rely on jQuery or other frameworks.

This package provides a solution that relies on regular JavaScript without using any frameworks.

Manuel Lemos
  Performance   Level  
Name: tomloprod <contact>
Classes: 1 package by
Country: Spain Spain
Innovation award
Innovation award
Nominee: 1x

Details

tomloprodModal Release License Build Status npm versionBower version

<br>

tomloprodModal is a simple and configurable javascript library to create responsive and minimalist modal windows with no dependencies. <p align="center"> <img src="https://github.com/tomloprod/tomloprodModal/blob/master/tomloprodModal-test.gif"/> </p>

DEMO: http://codepen.io/tomloprod/pen/kkYxWY

<br>

HTML & CSS Classes

  • tm-effect: If has this class shows fade effects on modal windows and scale effect on main container (if exist).
  • tm-draggable: Defines if the modal window can be dragged.
  • tm-emptyOnClose: When has this CSS class, the content of this element (input or tag) will be cleared.
  • tm-trigger: When an element has this CSS class, this element will be used for open the modal window indicated by his data-tm-modal attribute.

Example of modal window:

<div 
	class="tm-modal 
	tm-effect tm-draggable" 
	data-tm-bgcolor = "#3498db"
	data-tm-textcolor = "white"
	id="logInPopUp">
	
	<div class="tm-wrapper">
		<div class="tm-title">
			<span class="tm-XButton tm-closeButton"></span>  
			<h3 class="tm-title-text">Login</h3> 
		</div>
		<div class="tm-content">
			<form style="text-align:center;">
				<p>
					<input class="tm-emptyOnClose" placeholder="User" required="" type="text">
				</p>
				<p>
					<input class="tm-emptyOnClose" placeholder="Password" required="" type="password">
				</p>
				<p>
					<input id="remember" name="remember" type="checkbox" value="1">
					<label for="remember">Remember me</label>
				</p>
				<p>
					<input value="Log in" type="submit">
				</p>
			</form>
		</div>
	</div>
</div>

<div id="myMainContainer"> Lorem ipsum... </div>

<br>

Initialization

TomloprodModal.start({
    closeOut: true,
    showMessages: true,
    bgColor: "#FFFFFF",
    textColor: "#333333"
});

<br>

General Config Parameters

  • idMainContainer: Used to display an scale animation when the modal window opens. (Dynamically add the tm-MainContainer class to the element)
  • draggable: When true, all the modal window with the CSS class tm-draggable can be dragged. @default true
  • bgColor: Defines modal background color. @default #5c7d98
  • overlayColor: Defines overlay color. @default rgba(0,0,0,0.8)
  • textColor: Defines text and X button color. @default #FFFFFF
  • closeOnOverlay: Enables or disables closing the modal window by clicking the overlay. @default true
  • showMessages: Enables or disables de log messages. @default false
  • removeOverlay: When true, remove the overlay if exist. @default false
  • closeOnEsc: Enables or disables pressing the escape key to close the currently open modal. @default true
  • borderRadius: Assign a border-radius to the modal windows. @example 1em @default 0

<br>

Individual Config Parameters 1: data attributes

  • data-tm-title: Will replace the title of the element with tm-title-text class.
  • data-tm-content: Will replace the content of the element with tm-content class.
  • data-tm-bgcolor: Will change the background color by the indicated value for the modal window that has this data attribute. @example #e74c3c
  • data-tm-textcolor: Will change the text color by the indicated value for the modal window that has this data attribute. @example #FFFFFF
  • data-tm-closetimer: Will close the modal window when the milliseconds pass. @example 1000

Example of modal window with individual data attributes:

<div 
    data-tm-title="tomloprodModal 1" 
    data-tm-bgcolor = "#e74c3c"
    data-tm-textcolor = "white"
    data-tm-closetimer="3000"
    data-tm-content="My background color is red! :-) <p><b>And I will self-destruct in 3 seconds</b>" 
    class="tm-modal tm-effect tm-draggable" 
    id="testModal1">
    
    <div class="tm-wrapper">
        <div class="tm-title">
            <span class="tm-XButton tm-closeButton"></span>  
            <h3 class="tm-title-text"> </h3> 
        </div>
        <div class="tm-content"> </div>
    </div>
    
</div>

<div id="myMainContainer"> Lorem ipsum... </div>

<br>

Individual Config Parameters 2: params

  • title: Will replace the title of the element with the value of title param.
  • content: Will replace the content of the elementwith the value of title param.
  • bgColor: Will change the background color by the indicated value for the indicated modal window @example #e74c3c
  • textColor: Will change the text color by the indicated value for the indicated modal window. @example #FFFFFF
  • closeTimer: Will close the modal window when the indicated milliseconds pass. @example 1000

Example of modal window with individual parameters:

TomloprodModal.openModal("testModal", {
    bgColor: "#FFFFFF",
    textColor: "#333333",
	title: "Hi!",
    content: "Nothing to say",
	closeTimer: 1000
});

<br>

Miscellaneous


//////////// Create new modal with indicated params (without HTML)
TomloprodModal.create({
    bgColor: "#FFFFFF",
    textColor: "#333333",
	title: "Hi!",
    content: "Nothing to say",
	closeTimer: 1000
});

//////////// Stop operation of Tomloprod Modal.
TomloprodModal.stop();

//////////// Open the modal window with the indicated ID
TomloprodModal.openModal("logInPopUp");

//////////// Close the current modal window
TomloprodModal.closeModal();

//////////// Check if there are any open modal window
var isOpen = TomloprodModal.isOpen;

//////////// Gets the current modal window
var currentModalWindow = TomloprodModal.modal;

<br>

Handlers

///////////// Opening
TomloprodModal.registerHandler("opened", function () {
    console.info("Opening " + TomloprodModal.modal.id);
});

///////////// Closing
TomloprodModal.registerHandler("closed", function () {
    console.info("Closing " + TomloprodModal.modal.id);
});

///////////// Stop dragging
TomloprodModal.registerHandler("stopDragging", function () {
    console.info("Coord X: " + TomloprodModal.modal.style.left + ' | Coord Y: ' + TomloprodModal.modal.style.top);
});

///////////// Register and remove handlers
TomloprodModal.registerHandler("opened", myOpenedHandler);

function myOpenedHandler(){
     console.info("Opening " + TomloprodModal.modal.id);
}

//////////// Deletes the listener of the indicated handler.
TomloprodModal.removeHandler('opened', myOpenedHandler);

/////////// Or, if the handler is omitted, deletes all:
TomloprodModal.removeHandler('opened');
Screenshots  
  • tomloprodModal
  Files folder image Files  
File Role Description
Files folder imagesrc (4 files)
Files folder imagetest (1 file)
Accessible without login Plain text file .travis.yml Data Auxiliary data
Accessible without login Plain text file bower.json Data Auxiliary data
Accessible without login Plain text file Gruntfile.js Aux. Class source
Accessible without login Plain text file LICENSE.md Lic. License text
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Image file tomloprodModal-test.gif Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
  Accessible without login Plain text file tomloprodModal-1.0.2.min.css Data Auxiliary data
  Plain text file tomloprodModal-1.0.2.min.js Class Class source
  Accessible without login Plain text file tomloprodModal.css Data Auxiliary data
  Plain text file tomloprodModal.js Class Class

  Files folder image Files  /  test  
File Role Description
  Accessible without login Plain text file tomloprodModal-test.html Example Example

 Version Control Unique User Downloads Download Rankings  
 92%
Total:65
This week:9
All time:452
This week:5Up