jquery - 使用 jQuery 在文本框中单击打开窗口

Question

我想创建一个类似于 www.redfin.com 的功能他们的搜索页面上有。当用户单击文本框时，将打开搜索表单。

我正在使用 MVC 和 jQuery，但不知道如何去做。我尝试使用对话框插件，但由于某种原因该对话框只打开一次。

<input id="txtSearch" type="text" />
<div id="searchForm" title="Dialog Title">I am a dialog</div>

$("#txtSearch").click(function() {
    // Show form
    $("#searchForm").dialog();
});

但是，在常规网站中，该对话框甚至不会打开。

$("#txtSearch").click(function() {
        // Show form
        $("#searchForm").dialog();
    });

使用焦点或单击似乎具有相同的效果。该对话框仅打开一次。当我关闭它并再次单击文本框时，没有对话框。

我是否使用正确的方法来完成这项任务？ 有 sample 吗？ 欢迎提出建议。

该对话框可能不是最佳选择，因为它创建了标题。我想知道我还可以使用什么，因为我还想通过 ajax 发布表单并在同一页面上显示结果。

谢谢

Answer 1

并且您想确保将事件绑定(bind)包装在文档准备好的脚本中(您可能已经在这样做，但我只是指出它，因为它不在您的示例代码中，以防万一)

$(document).ready(function() {
    $("#txtSearch").click(function() {
        // Show form
        $("#searchForm").dialog();
    });
});

编辑

$("#searchForm").dialog();我认为仅将对话框注册到搜索表单

我认为您可能需要调用对话框 show() 和 hide() 才能使其显示和消失。我用过jqModal之前不得不这样做

$(document).ready(function() {
    $("#searchForm").jqm({modal: true}); //register this div as a modal

    $("#txtSearch").click(function() {
        // Show form
        $("#searchForm").jqmShow(); //show div
    });
});

稍后，要关闭模式，您可以调用

$("#searchForm").jqmHide();