Hi All,
The jQuery UI framework offers up a functional Dialog widget that allows resizing and also the ability to display forms. The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the ‘x’ icon by default.
for creating a dialog :
$("#DivID").dialog({
autoOpen: false,
height: 270,
width: 550,
modal: true,
title: 'Name of the title',
draggable: true,//You can drag any where on a page
resizable: false,//Size can be increase or decrease.
closeOnEscape: false//while press Escape button
});
This is simple dialog properties.
1. pass it as parameter in dialog is used for hiding close (x) in dialog:
open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
Another method for hidinh close(x)button in right corner is
$("#DivID").dialog().parent('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
2.We have event Close event , while colse the dialog is there any functnality you want then you need to pass like
$('#DivID').dialog({
close: function(event, ui) {
var urlString1 = '<%=Url.Action("Action", "Controller") %>';
var urlString = urlString1;
urlString = Url.decode(urlString);
urlString = String.format(urlString);
try { location.href = urlString; } catch (e) { }
}});
3. We have event beforeclose
$("#DivID").dialog({
beforeclose: function(event, ui) {
if (cancel == false) {
if (dirtyFlag == true) {
return any URL or some thing.
}
}
}
});
If you want to some more information please refer :
jQuery UI Dialog
Thanks.
The jQuery UI framework offers up a functional Dialog widget that allows resizing and also the ability to display forms. The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the ‘x’ icon by default.
for creating a dialog :
$("#DivID").dialog({
autoOpen: false,
height: 270,
width: 550,
modal: true,
title: 'Name of the title',
draggable: true,//You can drag any where on a page
resizable: false,//Size can be increase or decrease.
closeOnEscape: false//while press Escape button
});
This is simple dialog properties.
1. pass it as parameter in dialog is used for hiding close (x) in dialog:
open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
Another method for hidinh close(x)button in right corner is
$("#DivID").dialog().parent('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
2.We have event Close event , while colse the dialog is there any functnality you want then you need to pass like
$('#DivID').dialog({
close: function(event, ui) {
var urlString1 = '<%=Url.Action("Action", "Controller") %>';
var urlString = urlString1;
urlString = Url.decode(urlString);
urlString = String.format(urlString);
try { location.href = urlString; } catch (e) { }
}});
3. We have event beforeclose
$("#DivID").dialog({
beforeclose: function(event, ui) {
if (cancel == false) {
if (dirtyFlag == true) {
return any URL or some thing.
}
}
}
});
If you want to some more information please refer :
jQuery UI Dialog
Thanks.
No comments:
Post a Comment
Share your thoughts....