Question

我正在使用jquery的对话框 api。像这样：

<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>

但是这里的问题是默认情况下表单是可见的，并且在第一次单击按钮后它显示在对话框中，然后它正常工作（即对话框部分）....所以要克服那个我保留的东西可见性（主 div ）作为隐藏在启动时动态更改为：

$('#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");
            }
        });
    });

这不是正确的程序..... 我该如何从开始本身

创建表单作为对话

Answer 1

仅供参考，这不是一个确切的例子，因为我受到时间的压力（是时候离开了）但我今天早些时候回答了一个关于ui对话的问题。

查看我的Working Fiddle Here *已修复

如果我以后有机会，（如果没有其他人可以参加），我会告诉你一个小小的例子。但是如果你查看提供的链接，你会看到如何建立一个对话框，你会看到它的HTML实际上写在HTML区域（也就是你身体上的视图）;

我使用一个简单的css来确保它在加载时保持隐藏，尽管jquery默认为autoOpen: false。这是因为，有时候，如果您不将CSS隐藏到display: none

，则会隐藏对话框之前会略微闪烁一下

更新

下面我将发布带有注释的代码，这些注释是代码的再现

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

别忘了在页面上放置对话框html。然后添加以下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");
});

设置JQuery Dialog的默认行为

1 个答案:

更新