Question

I am using dialog api of jquery. Like this:

<tr>
    <td>&nbsp;</td>
    <td colspan="3">
            <a href='#' id='btnAddNewSkill'> add new</a>
    </td>
    <td>
        <div id="addNewSkillDialog" style='visibility: hidden;'>

        <form>
            <table width='100%' border='0'>
                <tr>
                    <td>
                        <label for="name">Name of New Skill</label> 
                        <input type="text" name="name" id="name" class=" ui-corner-all" />
                    </td>
                </tr>
            </table>
        </form>
        </div>
    </td></tr>

But here the problem is the form is visible by default and after first click to button it shows in a dialog thing, and after that it works correct (i.e. the dialog part)….so to overcome that thing I kept the visibility (of the Main div) as hidden in start and changing it on the fly as:

$('#btnAddNewSkill').click(function() {
        $("#addNewSkillDialog").css('visibility', 'visible').dialog({
            show : "fold",
            hide : "explode",
            resizable : false,
            modal : true,
            closeOnEscape : true,
            height : 120,
            title : 'Add New Skill',
            buttons : {
                "Add Skill" : function() {
                    alert('Add skill Clicked');
                },
                Cancel : function() {
                    $(this).dialog("close");
                }
            },
            close : function() {
                $(this).dialog("dispose");
            }
        });
    });

This is not the correct procedure to do this…..
how should I make a form as a dialog from the start itself

Answer 1

FYI, its not exact example, as i’m pressured for time (it’s time to leave) but i answered a question earlier today about ui-dialogs.

see my Working Fiddle Here *fixed

If I get a chance later, (if no one else gets to it) i’ll make you a fiddle with your exact example. But if you look in the link provided, you’ll see how to establish a dialog and and you’ll see the html for it is actually writtin on the HTML area (aka on your view in the body);

I use a simple bit of css to ensure it stays hidden on load, despite the fact the jquery default is autoOpen: false. this is because, sometimes, there will be a slight flash of the dialog before its hidden if you DONT CSS it to display: none

UPDATE

Below I’ll post code with comments that is a rendition of your code with corrections

<!-- CSS
onload (in other words, place in header or in header link -->
#addNewSkillDialog {
    display: none;
}

Dont forget to place dialog html on page. then add the following JS

// you dont set the dialog in the click,
// set it seperately, use the click to open it
$("#addNewSkillDialog").dialog({
    //  HERE IS WHAT YOU'RE MISSING !!!
    autoOpen: false,
    //  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    show: "fold",   //  the animation on show
    hide: "explode",    // the animation on close
    resizable: false,   // prevents user from resizing
    modal: true,    //  puts a screen behind modal that prevents clicking on page
    closeOnEscape: true,    //  esc key will close dlg
    height: 120,    //  INNER height of dialog
    title: 'Add New Skill', // dlg title in ttl bar
    buttons: {  //  your own button set
        "Add Skill": function(e) {
            alert('Add skill Clicked');
        },
        Cancel: function(e) {
            $(this).dialog("close");
        }
    },
    close: function(e) {
        //$(this).dialog("dispose");    //  unnecessary
    }
});

//  then establish your click to open it
$('#btnAddNewSkill').click(function(e) {
    $("#addNewSkillDialog").dialog("open");
});