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();
}
Related
I open a jQuery Modal Dialog. I open a second Modal Dialog after the first one closes. When the second one closes I cannot interact with my page any more. Seems that there is some modal dialog still alive.
Can someone help?
Thanks
function modalFirst_Set() {
$('#modalFirst').dialog({
autoOpen: false,
dialogClass: 'DynamicDialogStyle',
resizable: true,
draggable: true,
modal: true,
width: 400,
height: 120,
title: "My First Modal",
open: function (type, data) {
var Page = 'PageFirst.aspx';
$('#modalFirst').load(Page);
},
close: function (event, ui) {
var retValue = $('#modalFirst_RetValue').val();
if (retValue=='X')
modalSecond_Show();
$(this).dialog('destroy');
modalFirst_Set();
}
});
}
function modalSecond_Set() {
$('#modalSecond').dialog({
autoOpen: false,
dialogClass: 'DynamicDialogStyle',
resizable: true,
draggable: true,
modal: true,
width: 400,
height: 120,
title: "My Second Modal",
open: function (type, data) {
var Page = 'PageSecond.aspx';
$('#modalFirst').load(Page);
},
close: function (event, ui) {
$(this).dialog('destroy');
modalSecond_Set();
}
});
}
No problem with this code. The problem was inside the pageSecond.aspx file.
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",
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
I am playing with Jquery UI
I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function
It works fine as shown on this example
http://jsbin.com/ubovej
The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work
as in:
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
If this is the button Click Event code then
autoOpen: false,
should be
autoOpen: true,
EDIT: If you don't want it opened til you click the button then:
Do this when you want the dialog created.
var $dialog = $("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
and do this after they click the button (only after the dialog is created)
$("button_selector").click(function () {
$dialog.dialog("open");
});
EDIT: Try changing
function closeDialog1(){
alert('closing Dialog1');
window.parent.$('#mydialog1').dialog('close');
return false;
}
to
function closeDialog1(){
alert('closing Dialog1');
$('#mydialog1').dialog('close');
return false;
}
Or a better way to do this might be
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load('dialogtest1a.html');
},
buttons: {
"Close" : function () {
$(this).dialog("close");
}
}
});
Does the button that closes the dialog HAVE TO be in the page you are loading?
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.