Monday, 8 June 2020

how to play with dialog box



we will discuss jQuery dialog widget with examples.
2 simple steps to get the jQuery dialog widget on a web page
1. Place the content inside a div element
<div id="dialog">This is jQuery dialog widget example</div>
2. Find the div element and call jQuery UI dialog() function
$('#dialog').dialog(); $('#dialog').dialog((title: 'title from title option')); ));
There are many jQuery dialog options to customize the dialog widget. Here are some of the most commonly used options
title - Sets the title of the dialog. You can also use the title attribute of the div element to set the title for the dialog. If both are specified title option value overrides the value set using th element title attribute
draggable - Boolean option that determines if the dialog can be draggable by the title bar
by default this widget can drag by user, if u want to not drag, boolean: false
resizable - Boolean option that determines if the dialog is resizable
default is resizable, so use resizeable:false;
closeOnEscape - Boolean option that determines if the dialog can be closed by pressing the Esc key
dialog close when user press by escape , for that use not boolean is false
modal - Boolean option that determines if the dialog is modal dialog. With modal dialog other items on the page will be disabled and cannot be interaced with until the dialog is closed
if this open, we cant use anything in document, for that modal:false,-we can use backside alsoe, modal:true - we cant use anything backside
autoOpen - Boolean option that determines if the dialog should open automatically upon initialization. If set to false, the dialog will stay hidden until the open() method is called
if it is false,it wiil not open until is called
('#dialog').dialog('open'); it opens the dialog when this callled or clicked







dialog
title
draggable
resiable
closeonescape
modal
autoopen





No comments:

Post a Comment