Tikslus Dialog

Tiklsus dialog is a jquery plugin which can show HTML content inside a popup box.

To use tikslus dialog in your project,download the zip file and extract it in any directory on your web server.

Include jquery framework & tikslus dialog files:

<link rel="stylesheet" href="tikslus_dialogs.css"/>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="tikslusdialog.js"></script>

To show/open dialog window you need to call tdialog function inside <script></script> tags:

<script language="javascript">
 $("#list1").click(function(e){
  e.preventDefault();
 $.fn.tdialog({
 type:"window",
 title:'Parameter list',
 width:$.fn.tdialog.tScreenWidth(150),
 height:500,
 content:function(){
 return $("#param_wrapper").html();
 }
  })
 });
</script>

Examples

click here to open a dialog box

To show an information dialog, you call tdialog function with these parameters:

First create a link with id "info1" then call the tdialog function

<script language="javascript">
$("#info1").click(function(){
$.fn.tdialog({
 type:"info",
 content:"This is a information dialog.",
 title:"test",
 icon:"info",
   effect:'css3',
 css3EffectIn:'flipY',
 css3EffectOut:'bounce',
});
});
</script>

To show an Information dialog, you need to set these paramters at least:

click here to open a confirmation dialog

code for confirmation dialog:

<script language="javascript">
$("#confirmation").click(function(){
$.fn.tdialog({
 type:"confirm",
 content:"Are you sure, you will use tikslus dialog ?",
 title:"Confirm",
 icon:"confirm",
  effect:'css3',
 css3EffectIn:'bench-in',
 css3EffectOut:'bench-out',
 confirmCallback:function(){

$.fn.tdialog({
type:'info',
content:'Hey, thanks for your support.',
title:'Thanks',
icon:'info',
draggable:true
})
 }
});
});
</script>
Type & icon parameters of the dialog should be 'confirm'. Also, you must provide 'confirmCallback' parameter. It takes any vaild function/callback function. confirmCallback function will be executed when someone presses 'confirm' button. If you don't provide 'confirmCallback' function, dialog will close when someone presses 'confirm' button.

click here to open a 'Prompt' dialog

code for Prompt dialog:

<script language="javascript">
  $("#prompt1").click(function(e){
  e.preventDefault();
 $.fn.tdialog({
 type:"prompt",
 title:'Name',
 content:"enter your name",
 promptCallback:function(){
 alert("hello "+$("#prompt").val());
 }
 })
 });
</script>

click here to open a error dialog

code for error dialog

<script language="javascript">
$("#error1").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"error",
 content:"Fatal error.",
 title:"oops",
 icon:"error"
});
});
</script>

Use of custom Buttons and callbacks

You can create custom buttons and attached them with custom callback functions.

click here to open dialog with custom buttons

<script language="javascript">
$("#custombuttons1").click(function(e){
e.preventDefault();
$.fn.tdialog({
type:"info",
content:"Custom buttons example",
buttons	: {
				Yes	: {
					button_class	: 'blue',
					action: function(){
						alert('yes');
					}
				},
				No	: {
					button_class	: 'gray',
					action: function(){
					alert('no');
					}	// Nothing to do in this case. You can as well omit the action property.
				}
			},
			
icon:'info'	,
showMinimize:true		
 });
 });
</script>

Open windows

You can also create windows using "type" parameter:

click here to open Screen size window
<script language="javascript">
 $("#bigwindow1").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<iframe src='http://tikslus.com' width=98% height='90%' scrolling=no frameborder=0></iframe>",
 width:$.fn.tdialog.tScreenWidth(150),
 height:$.fn.tdialog.tScreenHeight(150),
 position:'center',
 icon:'lock',
		
 })
 

 });
</script>

YOu can show anything (pictures, iframe, videos, text) in a window. The above example opens an iframe in the window.

you can make use of tikslus dialog's helper functions: $.fn.tdialog.tScreenWidth,$.fn.tdialog.tScreenHeight to open full sized windows. these functions take single parameter that acts as an offset from horizontal and vertical positions. For example, in the above example, $.fn.tdialog.tScreenWidth(150) and $.fn.tdialog.tScreenHeight(150) will draw a window having total width same as screen width - 150 pixels.

click here to open an image in window
<script language="javascript">
 $("#bigwindow2").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
 icon:'lock',
   effect:'css3',
 css3EffectIn:'fly-in',
 css3EffectOut:'fly-out',
		
 })
 

 });
</script>
click here to open YOUTUBE video in window
<script language="javascript">
 $("#bigwindow3").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'Video from YOUTUBE',
 content:'<iframe width="560" height="315" src="http://www.youtube.com/embed/X7mOzWQSnaQ" frameborder="0" allowfullscreen></iframe>',
 width:560,
 height:315,
 position:'center',
 icon:'lock',
		
 })
 

 });

</script>

The position Parameter

Position parameter can take following values:

Examples:

center top bottom top left bottom left top right bottom right center left center right
<script language="javascript">
 $("#poscenterright").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center right',
 icon:'lock',
		
 })
 

 });
</script>

The effect Parameter

effect parameter can take following values:

You can experiment effect parameter with position parameter.

Examples:

slide window from top and stop at center
<script language="javascript">
 $("#effect1").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center left',
 icon:'lock',
 effect:'slide'
		
 })
 

 });
</script>
slide window from top to bottom
<script language="javascript">
 $("#effect2").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'bottom',
 icon:'lock',
 effect:'slide'
		
 })
 

 });
</script>
slide window from right to left with position bottom
<script language="javascript">
 $("#effect3").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'bottom',
 icon:'lock',
 effect:'slide left'
		
 })
 

 });
</script>
slide window from center left
<script language="javascript">
 $("#effect4").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
 title:'This is a window',
 content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center left',
 icon:'lock',
 effect:'slide right'
		
 })
 

 });
</script>

Using CSS3 transition effects

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)

To use CSS3 transition effects. set parameter 'effect' to 'css3'

You can use transitions for the dialog entrance and exit.

<script language="javascript">
 $("#titleless").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
 icon:'lock',
 effect:'css3',
title:'css3 effects',
 css3EffectIn:'fly-in',
 css3EffectOut:'fly-out'
 
		
 })
 

 });
</script>

You need to set 'css3EffectIn' parameter for the entrace effect and 'css3EffectOut' parameter for the exit effect

Examples

Create Title less dialog box

Set titleBar to false title-less window dialog

<script language="javascript">
 $("#titleless").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
 icon:'lock',
 effect:'fade',
 titleBar:false
		
 })
 

 });
</script>
click here to open title-less confirmation dialog
<script language="javascript">
$("#tlessconfirmation").click(function(){
$.fn.tdialog({
 type:"confirm",
 content:"Are you sure, you will use tikslus dialog ?",
 icon:"confirm",
 confirmCallback:function(){

$.fn.tdialog({
type:'info',
content:'Hey, thanks for your support.',
title:'Thanks',
icon:'info'

})
 },
 titleBar:false
});
});
</script>

Create Button less dialog box

Set showButtons to false button-less window dialog

<script language="javascript">
 $("#buttonless1").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
  title:'click background overlay to close window',
 icon:'lock',
 effect:'fade',
showButtons:false
		
 })
 

 });
</script>

autoCloseInterval and autoClose parameters

Autoclose any window by setting autoCloseInterval and autoClose paramters

autoclose window dialog in 3 seconds

set autoCloseInterval to 3000 to close window in 3 seconds

<script language="javascript">
 $("#autoclose1").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
  title:'click background overlay to close window',
 icon:'lock',
 effect:'fade',
showButtons:false,
 autoClose:true,
 autoCloseInterval:3000		
 })
 

 });
</script>

showClose Parameter

You can toggle close button (button with 'x') by setting showClose paramter. By default this is set to true. To hide this button, set it's value to false

hide close button example

<script language="javascript">
 $("#hideclose").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
  title:'click background overlay to close window',
 icon:'lock',
 effect:'fade',
showButtons:false,
showClose:false
 })
 

 });
</script>

showMinimize Parameter

You can show minimize button on the dialog by setting showMinimize paramter to true. By default this is set to false.

showMinimize example

<script language="javascript">
 $("#showminimize").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
  title:'click background overlay to close window',
 icon:'lock',
 effect:'fade',
 showButtons:false,
showMinimize:true
 })
 

 });
</script>

draggable parameter.

You can drag a dialog by clicking and dragging on to it's title bar. By default, this is set to true. Dialog having no title bar can't be dragged.

draggable parameter example
<script language="javascript">
$("#drag").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"info",
 content:"click on title bar and try to drag this dialog.",
 title:"draggable example",
 icon:"info",
 draggable:true,
 showButtons:false
});
});
</script>

showMinimize example

<script language="javascript">
 $("#showminimize").click(function(e){
e.preventDefault();
$.fn.tdialog({
 type:"window",
  content:"<img src='images/example.jpg' border='0'/>",
 width:450,
 height:306,
 position:'center',
  title:'click background overlay to close window',
 icon:'lock',
 effect:'fade',
 showButtons:false,
showMinimize:true
 })
 

 });
</script>

You can also use jquery callback function to return and set any value in 'content' parameter. For example, we will create a <div> and inside that we will print all the transation of 'hello world' string. Then we will use jquery function to return html code of this div to 'content' parameter. the DIV we have created is as follows:

<div id="hello_world" style="display:none">
<ul>
<li>English: hello world</li>
<li>Spanish: hola mundo</li>
<li>French:  Bonjour tout le monde</li>
<li>German: Hallo Welt</li>
</ul>
</div>

we will show UL content in window using jquery callback function

click here to view example of jquery callback function as content

<script language="javascript">
 $("#helloworld1").click(function(e){
  e.preventDefault();
 $.fn.tdialog({
 type:"window",
 title:'jquery function as content',
 width:200,
 height:200,
 content:function(){
 return $("#hello_world").html();
 }
  })
 });
</script>

List of parameters you can pass to tikslusdialog function


#parameterdescriptiondefault valuevalue range
1.typetype of window: can be window,prompt,alert,warning,error,info,confirm. It must be given inside double or single quotes.window can be
  • window
  • prompt
  • alert
  • warning
  • error
  • info
  • confirm
2.iconIcons can be displayed in title bar. It must be given inside double or single quotes.not set (blank) can be
  • help
  • info
  • error
  • warning
  • confirm
  • lock
  • alert
  • chat
  • clock
  • form
3.titletitle to be displayed in title bar. It must be given inside double or single quotes.not set (blank) can be any text or string
4.contentContent 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.
5.promptCallbackcallback 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());
 }
 
6.confirmCallbackcallback 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");
 }
7.positionPosition of the dialog/window on the screen.It must be given inside double or single quotes.center can be
  • center
  • top
  • bottom
  • top left
  • bottom left
  • top right
  • bottom right
  • center left
  • center right
8.effectAnimation 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
  • fade
  • slide
  • slide left
  • slide right
9.titleBardecides whether to show or hide title bar in the window. It takes boolean value (true or false)true can be
  • true
  • false
10.showButtonsdecides whether to show or hide buttons. For example, OK button on INFO dialog.true can be
  • true
  • false
11.showOverlaydecides whether to show or hide background overlay. It takes boolean value(true or false)true can be
  • true
  • false
12.closeKeyuse ESC key from keyboard to close dialog. It takes boolean value(true or false)true can be
  • true
  • false
14.closeOverlayclose dialog on clicking overlay. It takes boolean value(true or false)true can be
  • true
  • false
15.autoCloseautomatically close window/dialog without user interference. based on time interval. It takes boolean value(true or false)false can be
  • true
  • false
16.autoCloseIntervalThis works with autoClose parameter.3000 (3 minutes) can be any numeric value. 1000 means 1 minute.
17.animationSpeedTime interval used as 'delay' in animation effects.300 milliseconds can be any numeric value. 1000 means 1 minute.
18.draggableAllow 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
  • true
  • false
19.showClosedecides whether to show or hide close button (button with 'x') on title bar.true can be
  • true
  • false
20.showMinimizedecides whether to show or hide minimize button (button with '-') on title bar.false can be
  • true
  • false