0

我正在使用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>

但是这里的问题是默认情况下表单是可见的，在第一次单击按钮后，它会显示在对话框中，之后它可以正常工作（即对话框部分）......所以为了克服这个问题，我保持了可见性（的 Main div）隐藏在 start 中并动态更改为：

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

这不是执行此操作的正确程序.....我应该如何从一开始就将表单作为对话框

4

1 回答 1

1

仅供参考，这不是一个确切的例子，因为我时间紧迫（是时候离开了），但我今天早些时候回答了一个关于 ui-dialogs 的问题。

在这里查看我的工作小提琴*已修复

如果我以后有机会，（如果没有其他人得到它）我会让你摆弄你的确切例子。但是如果你查看提供的链接，你会看到如何建立一个对话框，你会看到它的 html 实际上是写在 HTML 区域（也就是你在正文中的视图上）；

尽管 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");
});
于 2012-04-09T23:04:22.023 回答