pavelkovalev / popmodal

popModal-fork

popModal

This library includes 3 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

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

Documentation

popModal

popModal(elem, html, params, okFun, cancelFun, onLoad, onClose);

elem - parent element, where popup will be placed (object) - required
Use: el or $(el)

html - static html, dinamic html or string (object, string) - required
Use: el.append(html), $(el).html() or 'text'

params - some parameters for popup (put parameters in {}):
   placement - popup position (string).
   Use: 'bottomLeft' - default, 'bottomCenter', 'bottomRight'

   showCloseBut - show/hide close button on popup (boolean).
   Use: true - default, false

   overflowContent - limit/no limit height of the content (boolean).
   Use: true - default, false

okFun - code execution by clicking on OK button, contained in popup (function).
Use: function(){}.
For work you need put an attribute to element - data-popmodal="ok". Popup will close automatically

cancelFun - code execution by clicking on Cancel button, contained in popup (function).
Use: function(){}.
For work you need put an attribute to element - data-popmodal="cancel". Popup will close automatically

onLoad - code execution before popup shows (function).
Use: function(){}

onClose - code execution after popup closed (function).
Use: function(){}

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="close" for close popup, also you can press ESC, or click on any place.

notifyModal

notifyModal(html, duration);

html - static html, dinamic html or string (object, string) - required
Use: el.append(html), $(el).html() or 'text'

duration - duration for show notification in ms (integer)
Use: 2500 - default, -1 for infinity

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

hintModal

hintModal();

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.

Examples

popModal

$(el).click(function(){
  popModal($(this), el2.html(), { placement : 'bottomLeft', showCloseBut : true, overflowContent : true },
    function(){
      alert('you click OK');
    },
    function(){
      alert('you click CANCEL');
    },
    function(){
      alert('before load');
    },
    function(){
      alert('after close');
    }
  );
});

notifyModal

notifyModal($(el), 2500);

hintModal

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