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();
    });

초점 또는 클릭을 사용하면 동일한 효과가있는 것 같습니다. 대화 상자는 한 번만 열립니다. 닫고 텍스트 상자를 다시 클릭하면 대화 상자가 없습니다.

이 작업을 수행하기 위해 올바른 접근 방식을 사용하고 있습니까? 샘플이 있습니까? 제안을 환영합니다.

대화 상자가 제목을 생성하기 때문에 최상의 선택이 아닐 수도 있습니다. Ajax를 통해 양식을 게시하고 같은 페이지에 결과를 표시하고 싶기 때문에 무엇을 사용할 수 있는지 궁금했습니다.

감사

Answer 1

그리고 문서 준비 스크립트에서 이벤트 바인딩을 래핑하고 싶을 것입니다 (이미이 작업을 수행하고 있지만 샘플 코드가 아니기 때문에 포기하고 있습니다).

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

편집하다

$ ( "#searchform"). 대화 (); 대화 상자를 내가 생각하는 검색 양식에만 등록합니다.

대화 상자 쇼 ()를 호출하고 ()를 호출하여 나타나서 사라지도록해야 할 수도 있습니다. 나는 그것을 사용했다 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();

Answer 2

당신은 아마도 사용하고 싶을 것입니다 focus 대신 이벤트 click 이벤트.

대화 상자에 무엇을 사용해야하는지, 나는 체크 아웃하는 것이 좋습니다. BeautyTips. 해당 페이지에서 "Triggers 사용자 정의"예제를 확인하십시오. 정확히 원하는 것입니다.