Member of www.tradehunk.com

Member of www.tradehunk.com - 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">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog Box</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

//by Narendra Singh - www.oyetrade.com, mr.nsjayas@gmail.com
$(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
  
    });
});
</script>
</head>
<body>
    <div id="dialog">
    <p>Want to learn more about the dialog widget? Check out the <a href="http://api.jqueryui.com/dialog/" target="_blank">API documentation.</p>
    </div>
</body>
</html>