Member of

Member of - Indian Manufacturers, Suppliers, Importers and Exporters B2B Business Directory

Monday, September 2, 2013

Learn How to Create jQuery Dialog Box

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

<!doctype html>
<html lang="en">
<meta charset="utf-8" />
<title>jQuery UI Dialog Box</title>
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>

//by Narendra Singh -,
$(function() {
$( "#dialog" ).dialog(
    //basic attributes
    position: [225,30],    //x,y position
    width: 800, //dialog width
    height: 300,
    modal: true, //if this is set to 'true' the dialog'll be open on grey overlay bagkground
    title: "My Dialog", //dialog title
    dialogClass: 'ffsWarningDialog no-close', // add runtime additional CSS class
    resizable: false, //true or false
    draggable: true, // true or false  
    //end basic attributes
    //animation effect
    show: {
        effect: "blind",
        duration: 1000
        hide: {
        effect: "explode",
        duration: 1000
    //end animation effect
    //custom buttons
     buttons: {
        "Delete all items": function() {
        $( this ).dialog( "close" );
        Cancel: function() {
        $( this ).dialog( "close" );
    //end custom buttons
    <div id="dialog">
    <p>Want to learn more about the dialog widget? Check out the <a href="" target="_blank">API documentation.</p>