2011-05-02 2 views
1

modal이 iframe 인 응용 프로그램에서 Spring MVC + jquery + modal을 통합하려고합니다.spring mvc jquery 모달 상자 및 iframe

jquery 플러그인은 SimpleModal입니다.

화면이 매우 간단합니다. 방문 페이지는 가격이 우편 번호를 기반으로하는 2 개의 제품이있는 생산 페이지입니다.

$(window).load(function(){ 
    var param = $.url().param('zipcode'); 
    alert("zipcode = " + param); 
    if(null == param || param.length == 0) 
    { 
     $.modal('<iframe src="zip-code.html" height="240" width="380" scrolling="no">', { 
     //overlayClose:false, 
     //closeHTML:"" 
     //onClose: contact.close 
     }); 
    } 

    }); 

우편 번호 상자가 표시되고 사용자는 간단한 우편 번호를 입력하고 적용된 선택된다

페이지로드가 다음 실행

.

우편 번호가 유효하고 주어진 지역에 속하는지 확인해야합니다. 오류가 발생하면 우편 번호 상자가 표시됩니다. 그렇지 않으면 우편 번호가 허용되고 창이 닫히기 시작하고 방문 페이지가 가격으로 새로 고쳐집니다.

이제 방문 페이지와 우편 번호 모달 창에 대한 간단한 컨트롤러를 만들었습니다. 우편 번호 모달은 방문 페이지와 동일한 컨트롤러를 사용합니다.

사용자가 적용 버튼을 선택하고 우편 번호가 유효한 경우 모달 창을 닫는 대신 방문 페이지 URL로 리디렉션되는 경우가 발생합니다.

jQuery를 처음 사용했습니다. 나는 다른 사람들이 modal이나 popup windows와 함께 spring mvc를 사용하고 있는지 조사하기 위해 웹을 검색했고 그 검색에는 실패했다.

+0

어떻게 페이지를 제출 하시겠습니까 (적용 버튼)? html 양식 제출을 하시겠습니까? 그렇게하는 경우 jquery ajax (http://api.jquery.com/jQuery.ajax/)를 사용하여 변경해야합니다. –

답변

0

당신은 당신의 방문 페이지에 넣어해야합니다

<script> 
    ... 
    function closeModal(){ 
     //code to close your modal 
    } 
</script> 

다음 스크립트는 당신을해야한다 "성공 페이지"(우편 번호가 확인 될 때로드 한)

<script> 
    window.parent.closeModal(); 
</script> 

을 마지막 스크립트는 방문 페이지에서 closeModal 공개 기능을 호출하므로 모달이 종료됩니다.

희망이 도움이됩니다. 환호

관련 문제