jquery plugin for showing tooltips, titles, modal dialogs and etc
JavaScript HTML CSS
Latest commit 6a24a7c Oct 5, 2016 @vadimsva committed on GitHub 05.10.16
Permalink
Failed to load latest commit information.
LICENSE.md Create LICENSE.md May 12, 2014
README.md 05.10.16 Oct 5, 2016
ajax.html Create ajax.html Mar 12, 2014
index.html 05.10.16 Oct 5, 2016
popModal.css 05.10.16 Oct 5, 2016
popModal.js 05.10.16 Oct 5, 2016
popModal.min.css 05.10.16 Oct 5, 2016
popModal.min.js 05.10.16 Oct 5, 2016

README.md

popModal

This library includes 6 components:
popModal - popup window, displayed near the parent element. Invoked by clicking on an element
notifyModal - notification popup, displayed on top of all elements. Invoked by event and hide after a certain time
hintModal - tooltip, displayed near the parent element. Invoked on mouse hover on an element and hide after element lost focus
dialogModal - modal dialog for big content or collection of content, displayed on top of all elements. Invoked by clicking on an element
titleModal - tooltip, displayed near the parent element, replace native title. Invoked on mouse hover on an element and hide after element lost focus
confirmModal - modal dialog for alert or confirm content, displayed on top of all elements. Invoked by clicking on an element

For work required only jQuery, other libraries are not required.

DEMO

Direct links to libs

popModal.js [33.2Kb]
popModal.min.js [17.4Kb]
popModal.css [17.3Kb]
popModal.min.css [16.3Kb]

Documentation

popModal

$(el).popModal({param1 : value1, param2 : value2, ...});

Parameters
  • html - static html, dinamic html, string, function (object, string, function). Use function if you want load content via ajax.
    Use: el.append(html), $(el).html(), 'text' or function(){}
  • placement - popup position (string).
    Use: 'bottomLeft' - default, 'bottomCenter', 'bottomRight', 'leftTop', 'leftCenter', 'rightTop', 'rightCenter'
  • showCloseBut - show/hide close button on popup (boolean).
    Use: true - default, false
  • onDocumentClickClose - close popup when click on any place (boolean).
    Use: true - default, false
  • onDocumentClickClosePrevent - prevent close popup when click on specified elements (string).
    Use: el or '.el'
  • overflowContent - overflow content (boolean).
    Use: false - default, true
  • inline - create popup relative element (boolean).
    Use: true - default, false
  • asMenu - use popup for show as dropdown menu (boolean).
    Use: false - default, true
  • beforeLoadingContent - show text, before loading content (string).
    Use: 'Please, waiting...' - default
  • onOkBut - code execution by clicking on OK button, contained in popup (function).
    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 (function).
    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 (function).
    Use: function(){}
  • onClose - code execution after popup closed (function).
    Use: function(){}

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({param1 : value1, param2 : value2, ...});
});

Use this, for immediately run popModal

$(el).popModal({param1 : value1, param2 : value2, ...});

Also you may use inline bind

<button id="elem" data-popmodal-bind="#content" data-placement="bottomLeft" data-showclose-but="true" data-inline="true" data-overflowcontent="false" data-ondocumentclick-close="true" data-ondocumentclick-close-prevent="e">example</button>

Popup is dynamically created. When you create the second popup, the first will be deleted!
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.



notifyModal

$(content).notifyModal({param1 : value1, param2 : value2, ...});

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

Notes

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



hintModal

$('.hintModal').hintModal();

Use: 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.

Notes

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



dialogModal

$(content).dialogModal({param1 : value1, param2 : value2, ...});

Parameters
  • topOffset - top offset for dialog, useful if some elements on page have position: fixed (integer, string).
    Use: 0 - default, '10%'.
  • top - top offset for dialog, uses for type:'modal' (integer, string).
    Use: 0 - default, '10%'.
  • type - type of dialog (string).
    Use: '' - default, 'modal' to show dialog not from top.
  • onOkBut - code execution by clicking on OK button, contained in dialog (function).
    Use: function(){}.
    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 (function).
    Use: function(){}.
    For work you need put an attribute to element - data-dialogmodal-but="cancel". Dialog will close automatically
  • onLoad - code execution before dialog shows (function).
    Use: function(el, current){}
    You can use parameters el and current for example to change html.
  • onClose - code execution after dialog closed (function).
    Use: function(){}
  • onChange - code execution after dialog page change (function).
    Use: function(el, current){}
    You can use parameters el and current for example to change html.

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

Triggers
  • load - execution before dialog shows.
    Use: $(el).on('load', function() {});
  • close - execution after dialog 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 after dialog page change.
    Use: $(el).on('change', function() {});

Notes

You may use external click function for element

$(el).click(function(){
  $(content).dialogModal({param1 : value1, param2 : value2, ...});
});

or use

$(content).dialogModal({param1 : value1, param2 : value2, ...});

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".



titleModal

$('.titleModal').titleModal();

Use: 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.

Notes

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.



confirmModal

$(content).confirmModal({param1 : value1, param2 : value2, ...});

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

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(){
  $(content).confirmModal({param1 : value1, param2 : value2, ...});
});

or use

$(content).confirmModal({param1 : value1, param2 : value2, ...});

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

popModal

$(el).popModal({
  html : $(content).html(),
  placement : 'bottomLeft',
  showCloseBut : true,
  onDocumentClickClose : true,
  onDocumentClickClosePrevent : '',
  overflowContent : false,
  inline : true,
  asMenu : false,
  beforeLoadingContent : 'Please, waiting...',
  onOkBut : function(){},
  onCancelBut : function(){},
  onLoad : function(){},
  onClose : function(){}
});
$(el).popModal({
  html : function(callback) {
    $.ajax({url:'ajax.html'}).done(function(content){
      callback(content);
    });
  }
});

notifyModal

$(content).notifyModal({
  duration : 2500,
  placement : 'center',
  type : 'notify',
  overlay : true
});

hintModal

<div class="hintModal">
  hover on me
  <div class="hintModal_container">
    text for hintModal
  </div>
</div>

dialogModal

$(content).dialogModal({});

titleModal

<div title="Title text" class="titleModal light" data-placement="bottom">Text</div>

confirmModal

$(content).confirmModal({});

License

The MIT License (MIT)