Question

目前在我的网站上，我正在显示ShowModalDialogue以显示警告。最近我被要求修改下面的行为：

早先的行为：

我曾经只是显示一条警告信息。用户可以单击对话框的“确定”或“关闭”按钮继续。

新行为：

我被要求在同一个ShowModalDialogue中插入一个文本框。现在，用户必须在单击“确定”按钮之前插入其首字母。此外，他现在也无法通过单击“关闭”按钮关闭对话框。如果他在文本框为空时单击“关闭”按钮或“确定”按钮尝试关闭对话框，则必须打开相同的弹出窗口并显示警告。但问题是在关闭警告信息之后，对话框在屏幕上随机移动，即使其属性已被修改，使其不会移动。

现在我被要求用更好的东西替换这个ShowModalDialogue。我有两个建议：1。CSS div Popup 2. Ajax-control ModalPopup。哪一个更好？还有什么可以用来代替我可以使用吗？

我主要担心的是外观漂亮且容易处理。

提前致谢。

Answer 1

想尝试qTip2吗？这个为你提供了很多选择。

http://craigsworks.com/projects/qtip2/demos/#dialogues

Answer 2

您只需使用 jquery UI

即可

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {
                bValid =  $("#d-form").valid();
                if (bValid ){
                    $( "#users tbody" ).append( "<tr>" +
                        "<td>" +  $( "#name" ).val() + "</td>" + 
                        "<td>" + $( "#email" ).val() + "</td>" + 
                        "<td>" + $( "#password" ).val() + "</td>" +
                    "</tr>" ); 
                    $( this ).dialog( "close" );
            }

            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

Fiddle

更好地替代ShowModalDialog

2 个答案: