<div class="col-md-2 col-sm-3 col-xs-4">
<button type="button" class="btn btn-primary" onclick="mobile_check();">휴대폰 인증 하기	</button>
</div>

mobile_check(); 으로 팝업을 뛰워 줍니다. 

1번째 팝업에서는 

var phone1 = $(".phone1", opener.document).val();

으로 부모창 input 에서 입력한 value를 보여주게 했고, 

1단계에서 한 차례 validate를 한 다음 2단계로 넘어 갈 때 sms을 쏴주게 되고, 

마지막 3단계에서 인증이 성공했다는 메시지가 보고 

<button type="button" class="btn btn-block btn-primary" onClick="self.close();">확인</button>
으로 창을 닫아 주게 되는 프로세스 입니다. 

질문 사항을 말씀 드릴려고 구구절절 많이 적었네요 ㅎㅎ

제가 하고 싶은 것은 이렇습니다. 

부모창에 핸드폰 번호를 입력하는 input은 

<input  name="phone1" type="text" maxlength="4" class="form-control input-lg" >

이렇게 되어 있는데요, 

3단계에서 확인을 눌러 창을 닫을 때 부모창 input에다가 

<input  name="phone1" type="text" maxlength="4" class="form-control input-lg" disabled>

끝에다 disabled 옵션을 주고 사용자로 하여금 
1. 인증이 완료 되었고
2. 인증이 완료 되었기 때문에 수정을 할 수 없다 
라는 것을 인식 시켜 주고 싶습니다. 

disabled 아니면 bootstrap에서 제공하는 id="disabledTextInput" 이나 readonly="readonly"를 넣고 싶네요. 

즉, 한마디로 요약하자면 자식창에서 close 이벤트가 발생 시 부모창에 html tag에 엘리먼트(이걸 엘리먼트라고 표현하는 것이 맞는지는 모르겠지만) 를 추가하고 싶은데 
고수님들의 고견을 듣고 싶습니다. :D