jQuery

【jQuery】ツールチップ、タイトル、モーダルダイアログなどを表示するpopModal

May 5, 2018
popModal

popModalはツールチップ、タイトル、モーダルダイアログなどを表示するためのjqueryプラグイン

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
外部クリック機能を使用することができます

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

インラインバインドを使用することもできます

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

Examples

$('#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) {}
});

MIT