jQuery colorbox onclose 업데이트 부모

도움을 줄 수 있습니다.jQuery colorbox onclose 업데이트 부모

그래서 저는 jQuery colorbox를 사용하고 있으며 링크를 클릭하여 활성화했습니다. colorbox에는 몇 가지 체크 박스가있는 폼이 있는데, 제출을 클릭 할 때 부모에게 선택된 체크 박스의 모든 값을 가져 오는 것입니다. 부모 창을 새로 고치지 않습니다. 자동으로 나는이 몇 가지 도움을받을 수 있다면 여기 http://tdesigns.net84.net/colorbox/example1/

Parent code 

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset='utf-8'/> 
     <title>ColorBox Examples</title> 
     <style> 
      body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;} 
      a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} 
      h2{font-size:13px; margin:15px 0 0 0;} 
     </style> 
     <link rel="stylesheet" href="colorbox.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script src="../colorbox/jquery.colorbox.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $(".iframe").colorbox({iframe:true, width:"400px", height:"400px"});     
      }); 
     </script> 
    </head> 
    <body> 
     <p><a class='iframe' href="../content/ajax.html">Outside Webpage (Iframe)</a></p> 
     <p> 
      Checkbox Items from Colorbox 
     </p> 
    </body> 
</html> 

popup code 

<form action="" method="post"> 
    Choose a country 
    <br /><br /> 
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia 
    <br /><br /> 
    <input type="submit" name="formSubmit" value="Submit" /> 
</form>

정말 감사하겠습니다 링크는 내용

으로 "Colorbox에서 체크 박스 항목"을 채울 수 있습니다. 사전에

많은 감사

출처

2012-05-18 Dev

우편 번호 여기에 작업 데모의 또는 jsfiddle을 만들 수 있습니다. –

코드를 @ChrisPratt로 업데이트했습니다. – Dev

이 문서 준비 기능을 그 파일에 ajax.html 파일에

먼저로드 jQuery를 다음과 같은 기능을 추가하여이 작업을 수행하고 추가 할 수 있습니다

$(document).ready(function(){ 
     $('#form').submit(function(){ 

        $('input:checkbox:checked').each(function(){ 
         window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,"); 

        }); 
        parent.$.colorbox.close(); 
        return false; 
     });    
    });

무엇 이 작업은 사용자가 overlay iframe에있는 submit button을 클릭 할 때 모든 확인란을 선택하여 해당 값을 상위 창 텍스트 div에 추가 한 다음 컬러 박스 창을 닫는 것입니다. 여기

는 ajax.html 파일 또한

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<form action="" method="post" id='form'> 
    Choose a country 
    <br /><br /> 
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br /> 
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia 
    <br /><br /> 
    <input type="submit" name="formSubmit" value="Submit" /> 
</form> 

<script> 
    $(document).ready(function(){ 
     $('#form').submit(function(){ 

        $('input:checkbox:checked').each(function(){ 
         window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,"); 

        }); 
        parent.$.colorbox.close(); 
        return false; 
     });    
    }); 
</script>

값은 당신이 localhost 또는 같은 virtualhost에서 코드를 실행해야이

<p id="text"> 
    Checkbox Items from Colorbox: 
</p>

처럼 추가됩니다 단락에 ID를 추가하기위한 수정 된 코드입니다 부모님이 계시거나 부모님이 child iframe에 접속하는 것을 허락하지 않을 경우. document root에있는 폴더에 수정 된 파일을 놓고 브라우저를 통해 액세스하십시오. 작동하는지 알려주세요.

여기 http://joynag.net/demos/colorbox/

출처

2012-05-18 15:36:20

대단히 감사합니다. @joy – Dev

대단히 환영합니다. 도와 드릴 수있어서 기쁩니다. :) –

jQuery colorbox onclose 업데이트 부모

답변

관련 문제