We Keep Coding

Strange jQuery dialog behaivor in Chrome. Working in IE but not in Chrome

I hava a dialog but it is not working properly in Chrome but it does in IE.
I am working in this beta page:
http://www.parlamentoabierto.mx/
You can see the malfunction if you go to the map and click on it.
The modal background is not fully disappearing.
dialog = $("#modal-mapa");
console.log(dialog);
dialog.dialog({
autoOpen: false,
height: 400,
width: 700,
modal: true,
draggable: false,
resizable: false,
dialogClass: 'ventanaModal',
open: function(event, ui) { console.log(dialog.dialog('option','position')); $('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); }); }
});
My guess can be that the version of the jQuery is not the best but that wont be easy to correct.

jQuery Dialog Popup showing, but not popping up

I have a Login Control I'd like to popup. The control is rendering, in a UI-dialog box even, but it's rendering on the page itself, not in a dialog popup. This is my first project using jQuery UI dialogs, but I haven't had a problem in other locations.
Because my access check is all code side I have attempted to simply the issue with
autoOpen: true,
Here is the jQuery:
function OpenLoginDialog() {
$("#divLoginOpen").dialog({
autoOpen: true;
appendTo: "#divSurveyMainPage",
modal: true,
dialogClass: "no-close",
width: 650,
height: 400,
title: "Login Please",
show: {
effect: "size",
duration: 800
},
hide: {
effect: "clip",
duration: 800
},
closeOnEscape: false
}).css('z-index', '1005');
return false;
}
My JSfiddle (below) has the HTML included, I've also moved the control HTML into the div where it belongs.
http://jsfiddle.net/p10bcxuq/
Please help! Thanks!
Actual Example: http://www.codelogically.com/Forms/Surveys/Surveys.aspx

I have updated your fiddle here - it had a lot of server side stuff which needed to be removed. You also need an opener.
$( "#opener" ).click(function() {
OpenLoginDialog();
});

jquery dialog too many buttons

here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?

jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery

jQuery UI modal dialog overlay fade out

Is it possible to apply a fade out effect on the jQuery UI modal dialog box overlay? The issue is that the overlay div is destroyed when the modal dialog box is closed preventing any kind of animation. This is the code I have that would work if the overlay div was not destroyed on close.
$("#edit-dialog-box").dialog(
{
autoOpen: false,
modal: true,
width: "30em",
show: "fade",
hide: "fade",
open: function()
{
$(".ui-widget-overlay").hide().fadeIn();
},
close: function()
{
$(".ui-widget-overlay").fadeOut();
}
});

Demo: http://jsfiddle.net/276Ft/2/
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
$('.ui-icon-closethick').bind('click.close', function () {
$('.ui-widget-overlay').fadeOut(function () {
$('.ui-icon-closethick').unbind('click.close');
$('.ui-icon-closethick').trigger('click');
});
return false;
});
}
});
​

I advise not to bind the fadeOut of the overlay to the “closethick” close event.
This solution will work in all cases, for example if you use a “Cancel” button, or if the dialog closes itself after doing anything else due to other buttons:
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
},
beforeClose: function(event, ui){
// Wait for the overlay to be faded out to try to close it again
if($('.ui-widget-overlay').is(":visible")){
$('.ui-widget-overlay').fadeOut(function(){
$('.ui-widget-overlay').hide();
$('.ui-icon-closethick').trigger('click');
});
return false; // Avoid closing
}
}
});

Make a jQuery UI close with setTimeout()

I am trying to make my jQuery UI dialog close after 5 seconds, but the code below doesn't do anything, any suggestions? I did test it with alert("hellow") and it did work fine but the code below is not working.
success: function(data) {
$(data).dialog({
modal: true,
width: 900,
height: 600,
resizable: false,
title: thetitle,
draggable: false,
open: function(event, ui) {
setTimeout('$(this).dialog("close");', 5000);
}
});
Why isn't this closing my dialog after 5 seconds? It does not do anything.

You'll want to pass setTimeout an actual function, rather than a string.
setTimeout(function() {
$(data).dialog("close");
}, 5000);
When you pass a string, the code is eval'd, which I'm pretty sure sets this to the global object (which is why $(this).dialog would never work).
Note that this won't with the above way either (since again this is the global object at that point), but it's still considered much, much better form than passing a string to setTimeout.

What about jquery .delay()?
success: function(data) {
$(data).dialog({
modal: true,
width: 900,
height: 600,
resizable: false,
title: thetitle,
draggable: false,
open: function(event, ui) {
$(this).dialog("close").delay(5000);
}
});

var sT = setTimeout('$(this).dialog("close");', 5000);