1.26[27.10.17]
Download GitHub Repo
popModal
jquery plugin for showing tooltips, titles, modal dialogs and etc
popModal
notifyModal
hintModal
dialogModal
titleModal
confirmModal
▴
popModal
Documentation
Basic

    						$('#elem').popModal({}) - #elem is html object, click on which causes to show popup.

Options

    						html - popup text, html, string or object when content loaded via ajax.
    						placement - popup position. Use: 'bottomLeft' - default, 'bottomCenter', 'bottomRight', 'leftTop', 'leftCenter', 'rightTop', 'rightCenter'
    						showCloseBut - show/hide close button on popup. Use: true - default, false.
    						onDocumentClickClose - close popup when click on any place. Use: true - default, false.
    						onDocumentClickClosePrevent - prevent close popup when click on specified elements. Use: el or '.el'.
    						overflowContent - overflow content. Use: false - default, true.
    						inline - create popup relative element. Use: true - default, false.
    						asMenu - use popup for show as dropdown menu. Use: false - default, true.
    						beforeLoadingContent - show text, before loading content. Use: 'Please, waiting...' - default.
    						onOkBut - code execution by clicking on OK button, contained in popup. Use: function(){}. For work you need put an attribute to element - data-popmodal-but="ok". Popup will close automatically.
    						onCancelBut - code execution by clicking on Cancel button, contained in popup. Use: function(){}. For work you need put an attribute to element - data-popmodal-but="cancel". Popup will close automatically.
    						onLoad - code execution before popup shows. Use: function(event, el){}.
    						onClose - code execution after popup closed. Use: function(event, el){}.

Methods

    						hide - for close popModal. Use: $('html').popModal("hide");.

Triggers

    						load - execution before shows. Use: $(el).on('load', function() {});.
    						close - execution after closed. Use: $(el).on('close', function() {});.
    						okbut - execution by clicking on OK button. Use: $(el).on('okbut', function() {});.
    						cancelbut - execution by clicking on Cancel button. Use: $(el).on('close', function() {});.

Notes
You may use external click function for element

    						$(el).click(function(){
    						$(el).popModal({});
    						});

Also you may use inline bind

    						<button id="elem" data-popmodal-bind="#content" data-placement="bottomLeft" data-showclose-but="true" data-overflowcontent="true" data-ondocumentclick-close="true" data-ondocumentclick-close-prevent="" data-inline="true" data-asmenu="false" data-size="{'width':'500'}">example</button>

Popup is dynamically created. When you create the second popup, the first will be closed!

For create footer in popup, use element div with class="popModal_footer". You can use attribute for element data-popmodal-but="close" for close popup, also you can press ESC, or click on any place.

Examples
default params

    						$('#elem').popModal({
    						html : $('#content').html(),
    						placement : 'bottomLeft',
    						showCloseBut : true,
    						onDocumentClickClose : true,
    						onDocumentClickClosePrevent : '',
    						overflowContent : false,
    						inline : true,
    						asMenu : false,
    						size : '',
    						onOkBut : function(event, el) {},
    						onCancelBut : function(event, el) {},
    						onLoad : function(el) {},
    						onClose : function(el) {}
    						});

loading ajax

    						$('#elem').popModal({
    						html : {url : 'ajax.html', method : 'POST', data : {}, dataType : 'html', loadingText : 'Please, wait...', errorText : 'An error has occurred'}
    						});

show as menu

    						$('#elem').popModal({
    						html : $('#content').html(),
    						asMenu : true
    						});

inline bind

    						<button id="elem" data-popmodal-bind="#content" data-placement="bottomLeft" data-showclose-but="true" data-overflowcontent="true" data-ondocumentclick-close="true" data-ondocumentclick-close-prevent="" data-inline="true" data-asmenu="false" data-size="{'width':'500'}">example</button>

notifyModal
Documentation
Basic

    						$('#elem').notifyModal({}) - #elem is html object, click on which causes to show popup.

Options

    						duration - duration for show notification in ms. Use: 2500 - default, -1
    						placement - popup position. Use: 'center' - default, 'leftTop', 'centerTop', 'rightTop', 'leftBottom', 'centerBottom', 'rightBottom', 'centerTopSlide', 'centerBottomSlide', 'leftTopSlide', 'leftBottomSlide', 'rightTopSlide', 'rightBottomSlide'
    						type - visual style. Use: 'notify' - default, 'alert', 'simple', 'dark'.
    						overlay - show notification popup on top of the content. Use: true - default, false.
    						icon - show icon. Use: false - default, true.
    						onLoad - code execution before popup shows. Use: function(event, el){}.
    						onClose - code execution after popup closed. Use: function(event, el){}.

Triggers

    						load - execution before shows. Use: $(el).on('load', function() {});.
    						close - execution after closed. Use: $(el).on('close', function() {});.

You can close this notification popup, by clicking on any place, close button or press ESC.

Examples
default params

    						$('#content').notifyModal({
    						duration : 2500,
    						placement : 'center',
    						overlay : true,
    						type : 'notify',
    						icon : false,
    						onLoad : function(el) {}
    						onClose : function(el) {}
    						});

inline bind

    						<button id="elem" data-notifymodal-bind="#content" data-duration="2500" data-placement="center" data-type="notify" data-overlay="true" data-icon="false" >example</button>

hintModal
Documentation
Basic

    						$('.hintModal').hintModal({}) - .hintModal is html object, hover on which causes to show popup.

You need to create html with class="hintModal" as parent element and put in this element div with class="hintModal_container", put here html, to be displayed.
To change position, add additional class class="hintModal_center" or class="hintModal_right" to parent element.

hintModal will be called automatically if document have elements with the class "hintModal".

Examples
default params

    						<span class="hintModal">example
    						<div class="hintModal_container">
    						Lorem Ipsum is simply dummy text of the printing and typesetting industry...
    						</div>
    						</span>

dialogModal
Documentation
Basic

    						$('#elem').dialogModal({}) - #elem is html object, click on which causes to show dialog.

Options

    						topOffset - top offset for dialog, useful if some elements on page have position: fixed. Use: 0 - default, '10%'.
    						top - top offset for dialog. Use: 0 - default, '10%'.
    						onDocumentClickClose - close popup when click on any place. Use: false - default, true.
    						onOkBut - code execution by clicking on OK button, contained in dialog. Use: function(event, el, current){}. For work you need put an attribute to element - data-dialogmodal-but="ok". Dialog will close automatically.
    						onCancelBut - code execution by clicking on Cancel button, contained in dialog. Use: function(event, el, current){}. For work you need put an attribute to element - data-dialogmodal-but="cancel". Dialog will close automatically.
    						onLoad - code execution before dialog shows. Use: function(el, current){}.
    						onClose - code execution after dialog closed. Use: function(el, current){}.
    						onChange - code execution after dialog page change. Use: function(el, current){}.

Methods

    						hide - for close dialogModal. Use: $('html').dialogModal("hide");.

Triggers

    						load - execution before shows. Use: $(el).on('load', function() {});.
    						close - execution after closed. Use: $(el).on('close', function() {});.
    						okbut - execution by clicking on OK button. Use: $(el).on('okbut', function() {});.
    						cancelbut - execution by clicking on Cancel button. Use: $(el).on('close', function() {});.
    						change - execution by clicking on change button. Use: $(el).on('change', function() {});.

Notes
You may use external click function for element

    						$(el).click(function(){
    						$(el).dialogModal({});
    						});

Also you may use inline bind

    						<button data-dialogmodal-bind="#content" data-topoffset="0" data-top="10%" data-ondocumentclick-close="false">example</button>

Dialog is dynamically created. When you create the second dialog, the first will be deleted!
You need to create div elements with classes class="dialogModal_header" - for show header, class="dialogModal_content" - for show content, and class="dialogModal_footer" - for show footer.
You can use attribute for element data-dialogmodal-but="close" for close dialog, also you can press ESC. To show collection of content, like pages in one modal dialog, use class for this dialogs. If you want to use collection of content, you can change content by clicking to arrows, or press left/right arrow on keayboard, or use attributes data-dialogmodal-but="prev" and data-dialogmodal-but="prev".

Examples
default params

    						$('#content').dialogModal({
    						topOffset : 0,
    						top : 0,
    						onDocumentClickClose : false,
    						onOkBut : function(event, el, current) {},
    						onCancelBut : function(event, el, current) {},
    						onLoad : function(el, current) {},
    						onClose : function(el, current) {},
    						onChange : function(el, current) {
    						if(current == 3){
    						el.find('.dialogModal_header span').text('Page 3');
    						$.ajax({url : 'ajax.html'}).done(function(content){
    						el.find('.dialogModal_content').html(content);
    						});
    						}
    						}
    						});

inline bind

    						<button data-dialogmodal-bind="#content" data-topoffset="0" data-top="10%" data-ondocumentclick-close="false">example</button>

titleModal
Documentation
Basic

    						$('.titleModal').titleModal({}) - .titleModal is html object, hover on which causes to show popup.

You need to put attribute title and class="titleModal". titleModal will show by default at the bottom, to change position, put attribute data-placement="top". You can use top, left or right.

titleModal will be called automatically if document have elements with the attribute title and "class='titleModal'".
You can use another style for titleModal, add class="light" to element.

Examples
default params

    						<button title="Title" class="titleModal" data-placement="bottom">Example</button>

with ellipsis text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text

    						<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:200px" class="titleModal light" data-placement="bottom">Lorem Ipsum is simply dummy text</div>

confirmModal
Documentation
Basic

    						$('#elem').confirmModal({}) - #elem is html object, click on which causes to show dialog.

Options

    						topOffset - top offset for dialog, useful if some elements on page have position: fixed. Use: 0 - default, '10%'.
    						top - top offset for dialog. Use: 0 - default, '10%'.
    						onOkBut - code execution by clicking on OK button, contained in dialog. Use: function(event, el){}. For work you need put an attribute to element - data-dialogmodal-but="ok". Dialog will close automatically.
    						onCancelBut - code execution by clicking on Cancel button, contained in dialog. Use: function(event, el){}. For work you need put an attribute to element - data-dialogmodal-but="cancel". Dialog will close automatically.
    						onLoad - code execution before dialog shows. Use: function(el){}.
    						onClose - code execution after dialog closed. Use: function(el){}.

Methods

    						hide - for close confirmModal. Use: $('html').confirmModal("hide");.

Triggers

    						load - execution before shows. Use: $(el).on('load', function() {});.
    						close - execution after closed. Use: $(el).on('close', function() {});.
    						okbut - execution by clicking on OK button. Use: $(el).on('okbut', function() {});.
    						cancelbut - execution by clicking on Cancel button. Use: $(el).on('close', function() {});.

Notes
You may use external click function for element

    						$(el).click(function(){
    						$(el).confirmModal({});
    						});

Also you may use inline bind

    						<button data-confirmmodal-bind="#content" data-topoffset="0" data-top="10%">example</button>

Dialog is dynamically created. When you create the second dialog, the first will be deleted!
You need to create div elements with classes class="confirmModal_content" - for show content, and class="confirmModal_footer" - for show footer.
You can use attribute for element data-confirmmodal-but="close" for close dialog.

Examples
default params

    						$('#content').confirmModal({
    						topOffset : 0,
    						top : 0,
    						onOkBut : function(event, el) {},
    						onCancelBut : function(event, el) {},
    						onLoad : function(el) {},
    						onClose : function(el) {}
    						});

inline bind

    						<button data-confirmmodal-bind="#content" data-topoffset="0" data-top="10%">example</button>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

- Menu 1
- Menu 2
- Menu 3
- Menu 4
- Menu 5

Dialog header 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Dialog header 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Dialog header 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.