CODEWITHSUNDEEP
jquery
faddevel
faddevel

Reputation: 11

JQuery dialog is created invisible

I have an issue with a dialog I'm trying to create in JQuery. It should open when a button is pressed. I've tried several different methods of creating it, and it always is created with "display:none" in the element style.

When I click the button, the page darkens (the 'modal' part), but the dialog doesn't show up. If I use firebug to remove the display:none attribute, the dialog appears correctly.

I have created several dialogs before with no problems and I'm thinking this must be an issue with the particular site I'm trying to create the dialog in. It's within a CMS that has a lot going on. I've tried commenting out the other scripts that are included and that didn't help.

Any ideas as to what might be causing this problem? Is there something on the site that would cause new elements to appear invisible? Or something that would cause jquery to add this attribute?

I have tried:

1) Creating the div at page load, creating the dialog with autoOpen:false, and setting the button click event to call the dialog open.

2) Creating the dialog when the button is clicked (i.e. ("text).dialog(...)

3) Setting display to inline after the dialog open event in either case

Here is an implementation of (1) above:

$(document).ready(function() {

$('body').append('<div id="win_dialog">test</div>');

$('#win_dialog').dialog({
    modal: true,
    autoOpen: false,
    show: "fade",
    hide: "fade",
    width: "auto",
    height: "auto",
    close: function(event, ui) {
        $("#win_dialog").remove();
    },
    buttons: {
        "Enter": function () {alert('works');},
        "Cancel": function () { $(this).dialog("close");}
    }
});

$('#enter_win_btn').click(function() {
    $("#win_dialog").dialog('open');
});
});

Thank you!!

Upvotes: 0

Views: 913

Answers (2)

faddevel
faddevel

Reputation: 11

Thanks to AlienWebguy's request for version numbers, I realized that I was using jquery-ui 1.8.4 with a css for version 1.8.10. I updated the script tag for jquery-ui to 1.8.10 and now everything seems to work.

Thanks everyone for the help! What a great resource this website is.

Upvotes: 1

OpenOne
OpenOne

Reputation: 3

There should be a css rule from CMS, overriding display: none on the dialog. check for the dialog class and id in firebug's css panel, on every included style. Some CMS have classname collisions and i had this problem with a wordpress theme once.

Also, are there any console errors?

Upvotes: 0

Related Questions