2012-05-15 35 views
0

좋아요, 나는 단순한 문제로 큰 골치 거리가 있습니다. 거의 다 왔지만 제대로 작동하지는 않습니다. 나는 simplemodal 그 안에 여러 동적으로 생성 된 div를 가지고 대화 상자에서 클릭 코드에서와 같은간단한 모드 대화 상자에서 div 조작 문제 - 추가 편집

<html> 
<head> 
<!-- Confirm CSS files --> 
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' /> 
</head> 

<body> 
<div id='container'> 
<h1>Test Page</h1> 
<div id='content'> 
    <div id='confirm-dialog'> 
     Page Content Goes Here 
    </div> 

<!-- modal content --> 
<div id='confirm'> 
    <div class='header'><span>Header Text</span></div> 
    <div class='message'> 
    <div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div> 
    <div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div> 
    <div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div> 
    </div> 
    <div class='buttons'> 
    <div class='yes'>OK</div> 
    </div> 
    </div> 
</div> 
<!-- Load JavaScript files --> 
<script type='text/javascript' src='scripts/jquery.js'></script> 
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script> 

<script type="text/javascript"> 
jQuery(function ($) { 
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) { 
    e.preventDefault(); 
    confirm("", function() { 
     for(var k = 0; k <= 3; k++) { 
      if(options[k].checked) { 
      var ele = document.getElementById("optionDiv" + k); 
      ele.style.display = "none;"; 
      //alert("Stop Here"); 
      } 
     } 

     }); 
}); 
}); 

function confirm(message, callback) { 
$('#confirm').modal({ 
    closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>", 
    position: ["20%",], 
    overlayId: 'confirm-overlay', 
    containerId: 'confirm-container', 
    containerCss: { 
         height: 300, 
         width: 450, 
         backgroundColor: '#fff', 
         border: '3px solid #ccc' 
        }, 

    onShow: function (dialog) { 
     var modal = this; 

     $('.message', dialog.data[0]).append(message); 

     // if the user clicks "yes" 
     $('.yes', dialog.data[0]).click(function() { 
      // call the callback 
      if ($.isFunction(callback)) { 
       callback.apply(); 
      } 
      // close the dialog 
      modal.close(); // or $.modal.close(); 
     }); 
    } 
}); 
} 
</script> 
</body> 
</html> 

을 가지고, 내가 만들려고 그것은 라디오 버튼 중 하나에서 사용자가 클릭 한 후 '클릭 그래서 확인 '을 클릭하면 해당 항목이 더 이상 팝업에 표시되지 않습니다. 그 코드를 alert("Stop here"); (위의 코드에 표시된대로 주석 처리 한 것)으로 따라 가면 div에서 팝업이 사라지는 것을 볼 수 있습니다. 하지만 일단 경고 상자를 지우거나 (또는 ​​결코 실행되지 않도록 주석 처리하면), 다음에 대화 상자를 활성화 할 때 숨겨진 div가 다시 나타납니다. 대화 상자가 활성화 될 때 숨겨진 채로 있도록 숨겨진 상태로 유지하려면 어떻게해야합니까? 미리 감사드립니다.

최종 편집 : 대화 상자가 열릴 때마다 원래 상태로 되 돌리는 솔루션을 찾았습니다. 난 그냥 jQuery 코드 이상이 붙여, 그것은 마법처럼 작동합니다

<script> $.modal.defaults.persist = true; </script> 

다른 질문의 일환으로, 다른 스레드에서이 사이트에 발견. 도와 주신 모든 분들께 감사드립니다.

+0

코드를 보지 않고도 질문에 대답 할 방법이 없습니다. 현재 상태에서는 시간 낭비입니다. : – gdoron

+0

나는 해당 코드를 보여 주었고 누구도이 페이지의 전체 내용을보고 싶어하지 않는다고 생각합니다. 간략하게 설명 했으니까요. 누락 된 부분이 있습니까? 시간은? – piratepops

+1

요소를 숨기는 HTML과 하나의 유효선을 보여 주시면 문제가 어디에서 발생했는지 알 수 있습니다. 문제가있는 곳은 어디인지는 알 수 없지만 여기에 없습니다. – gdoron

답변

1

귀하의 코드는 여전히하지만 confirm 기능 콜백이 같이

confirm("", function(){ 
    $('#confirm input[type=radio]').each(function(){ 
     if($(this).is(':checked')) 
      $(this).parent().empty(); 
    }); 
}); 

에 관해서는, 나에게 완전 보이지 않는다?

+0

아직 변경되지 않았습니다. '확인란'을 '라디오'로 설정합니다. 라디오 버튼이기 때문입니다. 이렇게하면 선택한 라디오 버튼은 숨겨 지지만 연관된 텍스트는 숨겨집니다. 대화 상자가 지워지면 다음에 열 때 라디오 버튼이 원래 상태로 돌아갑니다. 대화 상자가 열리면 다음 번에 사라지기를 원합니다. – piratepops

+0

내 대답 업데이트 – Madbreaks

+0

나는 그것이 내가 찾고 있던 것이라고 믿는다. 감사! – piratepops

관련 문제