$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fadeOut", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});
I'm using Chrome. Here's a demo.
When I close the dialog, it hides, but also shrinks.
I didn't tell it to shrink! Why does it do that?
Using fade instead of fadeOut will solve the issue.
Check this: http://jsbin.com/alafez/4/edit#preview
Because fadeIn and fadeOut are not valid values for the show and hide options. If you remove effect: "fadeOut", the result will be same. The valid option is fade.
$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fade", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});
Related
Im trying to use dialog() and it's working, but I have to click two times for the dialog text to open. My latest test was adding return false; after jQuery(this).dialog("close");.
jQuery("#divId").on('click', function() {
jQuery("divclass").dialog({
autoOpen: true,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {jQuery(this).dialog("close");return false;}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The definition of the jQuery dialog should be outside the click listener.
also, if you want to open it on click event, you should change the autoOpen to false.
$("#divId").on('click', function() {
$(".divclass").dialog( "open" );
});
$(".divclass").dialog({
autoOpen: false,
title: "Info",
width: 800,
height: 600,
modal: true,
buttons: {
close: function() {$(this).dialog("close");return false;}
}
});
The dialog is displayed and works perfectly. The top right "X" Close button properly dismisses the dialog, but the OK button does nothing.
(I'm using jquery 1.9.1)
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl,
success: function(data) {
$("#TFdialog").html(data).dialog({
resizable: true,
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
},
}).dialog('open');
}
});
}
I've also tried it without the comma following the button like:
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
}
}).dialog('open');
And I've tried these:
buttons: [{
text: "Ok",
Click : function () {
$("#TFdialog").dialog("close");
}
}]
and:
buttons: [{
Ok: function() {
$("#TFdialog").dialog("close");
}
}]
and I've tried replacing the "#TFdialog" with 'this' like:
$(this).dialog("close");
try doing
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( 'close' );
// your code goes here
}
}
]
Assumption is you use jQuery UI Reference https://jqueryui.com/dialog/#modal-form
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
You can also use the dialog as an object:
var myDialog;
myDialog = $("#TFdialog").html(data).dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
},
"Close this Soon" : DelayClose,
}
});
myDialog.dialog('open');
function DelayClose(){
setTimeout(function() {
myDialog.dialog( "close" );
}, 500 );
}
Example for why to use an object for yours:
var myDialog;
myDialog = $("#TFdialog").dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
}
}
});
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl
}).done(function(data){
$("#TFdialog").html(data);
myDialog.dialog('open');
});
}
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 2000
},
hide: {
effect: "explode",
duration: 500
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
define a id to the button for example,and do something like this
$("#id").click(function() {
$("#dialog").hide();
});
I am not being able to raise the formSubmitting event when I am submitting a custom jQueryUI modal using jTable. Following is the jqeuryui modal code:
$("#editDialog").dialog({
height: 600,
width: 500,
autoOpen: false,
modal: true,
show: {
effect: "fade",
duration: 250
},
hide: {
effect: "fade",
duration: 250
},
buttons: {
Cancel: function () {
$(this).dialog("close");
},
Save: function () {
$(this).find("form").submit();
$(this).dialog('close');
}
},
close: function () {
//allFields.val("").removeClass("ui-state-error");
}
});
Any suggestion on how to achieve this is highly appreciated.
Could not. Ended up showing the custom modal on own bound click event.
Okay, don't laugh, but my friend gave me a fix to a jQuery UI code before I asked for another fix here, and now I have no idea how to combine the two. I'm a total n00b so please help me out here. I tried, but keep getting a syntax error?
I need to merge this (I think it goes right after title):
beforeClose: function(){ $(this).remove(); }
Into this:
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
Can anyone please help? Thanks.
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features', //don't forget the comma
beforeClose: function(){ $(this).remove(); } //placed here
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});