- Overview
- Documents
Tiklsus dialog is a jquery plugin which can show any HTML content(plain text,tables,videos,pictures) inside a popup box. It also support alert,confirmation and prompt dialog creation. you can animate tikslus dialog with different transition effects. you can also create dialogs with custom buttons.
Source: tikslus.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="tikslus_dialogs.css"/> <script language="javascript" src="jquery.min.js"></script> <script language="javascript" src="tikslusdialog.js"></script>
2. HTML
<a href="#" id="info1">click here to open a dialog box</a>
3. JAVASCRIPT
$("#info1").click(function(e){ e.preventDefault(); $.fn.tdialog({ type:"info", content:"This is an information dialog.", title:"test", icon:"info", effect:'css3', //css3EffectIn:'rotate-in', //css3EffectOut:'rotate-out' effect:'css3', css3EffectIn:'flipY', css3EffectOut:'bounce', }); });
4. OPTIONS
parameter | description | default value | value range |
---|---|---|---|
type | type of window: can be window,prompt,alert,warning,error,info,confirm. It must be given inside double or single quotes. | window |
can be
|
icon | Icons can be displayed in title bar. It must be given inside double or single quotes. | not set (blank) |
can be
|
title | title to be displayed in title bar. It must be given inside double or single quotes. | not set (blank) | can be any text or string |
content | Content to be displayed in the dialog/window. It can be any text,image,videos,iframe,html code,google maps etc. It must be given inside double or single quotes. | not set (blank) | It can be any text,image,videos,iframe,html code,google maps etc. You can also return valid jquery function value as content. |
promptCallback | callback function that is called when OK button is pressed in PROMPT dialog box. | not set (blank) |
must be a valid jquery function definition. example:
promptCallback:function(){ alert("hello "+$("#prompt").val()); } |
confirmCallback | callback function that is called when CONFIRM button is pressed in confirm dialog box. | not set (blank) |
must be a valid jquery function definition. example:
confirmCallback:function(){ alert("you clicked confirm button"); } |
position | Position of the dialog/window on the screen.It must be given inside double or single quotes. | center |
can be
|
effect |
Animation effect for the window/dialog.
Tikslus Dialog can be used with predefined or CSS3 transition effects. Predefined Transition effects are: fade,slide,slide left,slide right We have also created some predefined CSS3 effects: rotate-in,roate-out,bench-in,bench-out,fly-in,fly-out,slideExpandUp,expandUp,bigEntrance,bounce,flipX,flipY. You can also use other CSS3 animations (like animate.css |
fade |
can be
|
titleBar | decides whether to show or hide title bar in the window. It takes boolean value (true or false) | true |
can be
|
showButtons | decides whether to show or hide buttons. For example, OK button on INFO dialog. | true |
can be
|
showOverlay | decides whether to show or hide background overlay. It takes boolean value(true or false) | true |
can be
|
closeKey | use ESC key from keyboard to close dialog. It takes boolean value(true or false) | true |
can be
|
closeOverlay | close dialog on clicking overlay. It takes boolean value(true or false) | true |
can be
|
autoClose | automatically close window/dialog without user interference. based on time interval. It takes boolean value(true or false) | false |
can be
|
autoCloseInterval | This works with autoClose parameter. | 3000 (3 minutes) | can be any numeric value. 1000 means 1 minute. |
animationSpeed | Time interval used as 'delay' in animation effects. | 300 milliseconds | can be any numeric value. 1000 means 1 minute. |
draggable | Allow dragging of window/dialog. To drag dialog/window press left mouse button and try to move dialog. It won't work if you have set titleBar to false. | true |
can be
|
showClose | decides whether to show or hide close button (button with 'x') on title bar. | true |
can be
|
showMinimize | decides whether to show or hide minimize button (button with '-') on title bar. | false |
can be
|