Is it possible to use built-in jQuery animations for use with a Dialog? I tried:
$('#dialog').dialog({
modal: true,
height: 500,
width: 550,
show: 'fadeIn',
hide: 'fadeOut'
});
But this does not work. The only way I can seem to get animations to work is by including the jQuery UI animations pack, which results in a larger file.
$('#dialog').dialog({
modal: true,
height: 500,
width: 550,
show: 'fade',
hide: 'fade',
});
The fadien and fadeout are independent methods. You can only use those options which you use with show and hide functions
Related
I have a page on which I use blockUI to block some elements. When the user clicks a button on the page, a dialog appears, but the blocks on the underlying page are "showing through" on the dialog. I have tried using z-index, such as in the following, but that hasn't worked. How can I stop the blocks from appearing on the dialog?
function showDialog() {
$("#imageGallery-modal").dialog({
width: 1200,
height: 600,
modal: true,
resizable: false,
zindex: 900000,
show: 'clip'
});
}
I removed the z-index, blocked the page before opening the dialog, and unblocked the page after the dialog closes.
function showDialog() {
$.blockUI();
$("#imageGallery-modal").dialog({
width: 1200,
height: 600,
modal: true,
resizable: false,
show: 'clip'
});
$.unblockUI();
}
I am trying to bring a Dialog Box using jQuery-UI where I am facing one issue.
Dialog box is opened in screen with its Tiltle and close button.However I am not able to close the dialog.I understand the issue is, the dialog opened is not recognized and hence the close button is not working.I am able to select elements in parent page which should not happen.
I done several researches in Google and could not find a solution for that.
Please help me to sort out this issue. I am pretty new into Java Scripts and jQuery.
The following are my codes.
Using jQuery UI - v 1.9.0.
HTML code
<div id="dialog">
<p>This is test Dialog Box Message !!</p>
</div>
Controller.js
There is a button in my page and inside of this button click event,I have
$("#dialog").dialog({
autoOpen: false,
title: "Test Tiltle",
height: 300,
width: 350,
modal: true,
show: 'fade',
hide: 'fade',
close : function() {
$(this).dialog( "close" );
}
});
$("#dialog").dialog( "open" );
You left of a "
http://jsfiddle.net/uDYcJ/1/
$("#dialog").dialog({
autoOpen: false,
title: "Test Tiltle",
height: 300,
width: 350,
modal: true,
show: 'fade',
hide: 'fade',
close : function() {
$(this).dialog( "close" );
}
});
$("#dialog").dialog( "open" );
You can see from the colour formatting in your code block that you're missing a closing double quotes in your title:
title: "Test Tiltle,
Just close up that string:
title: "Test Tiltle",
I have a dialog that gets filled by an ajax call. I want to limit the max-height of dialog and also allow it to be scroll-able if this max-height is exceeded. The code below does exactly what I want.
The catch is I can not move the top of the dialog from the top position. I can move it left and right. I can't use center either as the dialog is displayed in a large scroll-able window. If I use firebug I can adjust the top property but cannot find where it is being set to zero.
$("#your-dialog-id").dialog({
open: function(event, ui) {
$(this).css({'max-height': 500, 'overflow-y': 'auto'});
},
autoOpen:false,
modal: true,
resizable: false,
draggable: false,
width: '690',
closeOnEscape: true,
position: 'top'
});
I want to adjust the dialog's y position so it is 20px from the top of the window. Any idea what I can do?
Changing the last value solved the problem:
position: ['center',20]
http://jsfiddle.net/chrisloughnane/wApSQ/3
The easiest way is:
$("#dialog").dialog({ position: { my: "center", at: "top" } });
using Jquery UI 1.11.4
var Y = window.pageYOffset;
$( "#dialogJQ" ).dialog({
modal: true,
closeOnEscape: false,
width:'auto',
dialogClass: 'surveyDialog',
open: function(event, ui) {
$(this).parent().css({'top': Y+20});
},
});
I am unable to drag or resize a dialog box. I have downloaded all dependencies and tried various settings in options, but still no joy:
<script type="text/javascript">
function dialog(){
$("#paragraph").dialog({
title: 'This is a title',
width: 300,
height: 50,
modal: true,
draggable: true,
autoOpen: false,
buttons: {
'Remove': function () { // remove what you want to remove
// do something here
alert("this is a test alert!");
$(this).dialog('close');
$("#flex1").flexReload();
},
Cancel: function () {
$(this).dialog('close');
}
}
});
$("#paragraph").dialog("open");
};
</script>
<p id="paragraph">This is some paragraph text</p>
Downloads of the jQuery UI library are customizable. If your copy doesn't include the 'Draggable' and 'Resizable' interactions, your dialog will not be draggable or resizable.
Well maybe add resizable option and set it to true.
Also the dialog is draggable by the title bar not the entire dialog body.
Any good?
I would like to update jQuery dialog after receiving ajax response.
Here is my definition
var $dialog = jQuery('<div>Wait</div>') .html('Sending your message...<img src="../images/AjaxWait.gif" style="float: left; padding-left: 50px;"/>')
.dialog({
modal: true,
width: 160,
autoOpen: false,
resizable: false,
draggable: false,
});
$dialog.siblings(".ui-dialog-titlebar").hide();
and before ajax send:
$dialog.dialog('open').dialog('option', 'height', 50);
And once receiving ajax response I am trying following:
jQuery('.ui-dialog-content').dialog('option', 'buttons',
{ "Ok": function() { jQuery(this).dialog('close'); } } );
....but nothing happens......
any idea?
I think you cannot modify an existing dialog in this way. To accomplish the task you're faced with just include the button in the first call, but immediately hide it. Once the ajax request has finished just unhide the button. For a proper visual experience just use hide/unhide the whole button pane:
var $dialog = jQuery('<div>Wait</div>') .html('Sending your message...<img src="../images/AjaxWait.gif" style="float: left; padding-left: 50px;"/>')
.dialog({
modal: true,
width: 160,
autoOpen: false,
resizable: false,
draggable: false,
buttons: { "Ok": function() { jQuery(this).dialog('close'); }
})
;
// hide buttons
$dialog.children('.ui-dialog-buttonpane').hide();
In the event handler for ajax complete just do
// unhide buttons
$dialog.children('.ui-dialog-buttonpane').show();
Optionally you may provide an easing identifier to animate the unhiding process.