모달로 상태를 설정하는 방법

Question

도움이 필요합니다. 나는 무엇이 문제인지는 모르겠지만 제 2 모달은 나타나지 않지만 제 1 모달이 갑자기 나타나고있다.

내 프로그램은 다음과 같이 작동합니다.

1. 두 모달은 닫은 후에 클릭 가능해야하지만 다시 열면 체크 상자가 첫 번째 모달처럼 유지되어야합니다.

2. 은 무엇 난 내 2 모달에하고 싶은 것은 나는 그것이 내가 단 1 개 체크 박스를 선택하고 내가 다시를 다시 열 때 그 값을 유지합니다 의미 라디오 버튼처럼 작동 할 것입니다. 여기

   https://jsfiddle.net/fe73awsu/10/ 내 코드입니다 :

또한 나의 작업 바이올린을 확인하시기 바랍니다 test.php

<form method="post" name="testform" action=""> 

    <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up --> 
     Label 1<input readonly type="text" name="txt1" placeholder="inputTest">  
    </a> 

    <br><br> 

    <a href="#moda2"> <!-- when the input textbox was clicked, modal will pop up --> 
     Label 2<input readonly type="text" name="txt2" placeholder="inputTest">  
    </a> 

<!-- modal starts here --> 
    <div class="modalwrapper" id="modal"> <!-- modal --> 
      <div class="modalcontainer">  
       <div class="modalcol1"> 
        <label>Test 1</label> 
        <input type="checkbox" name="test_modal[]" value="1"> 
        <div class="clear"></div> 
        <label>Test 2</label> 
        <input type="checkbox" name="test_modal[]" value="2"> 
        <div class="clear"></div> 
        <label>Test 3</label> 
        <input type="checkbox" name="test_modal[]" value="3"> 
        <div class="clear"></div> 
        <label>Test 4</label> 
        <input type="checkbox" name="test_modal[]" value="4"> 
        <div class="clear"></div> 
        <label>Test 5</label> 
        <input type="checkbox" name="test_modal[]" value="5"> 
        <div class="clear"></div> 

        <div class="savebutton"> 
         <button class="btn1" type="button" value="Submit">Submit</button> 
        </div> 
       </div> <!-- close modalcol1 --> 
      </div> <!-- close modalcontainer --> 
     <div class="overlay"></div> 
    </div> <!-- close modalwrapper --> 


    <div class="modalwrapper" id="modal2"> <!-- modal --> 
      <div class="modalcontainer">  
       <div class="modalcol1"> 
        <label>Mango</label> 
        <input class="radio" type="checkbox" name="fruit1" value="1"> 
        <div class="clear"></div> 
        <label>Banna</label> 
        <input class="radio" type="checkbox" name="fruit2" value="2"> 
        <div class="clear"></div> 
        <label>Grapes</label> 
        <input class="radio" type="checkbox" name="fruit3" value="3"> 
        <div class="clear"></div>    
        <div class="savebutton"> 
        <button class="btn1" type="button" value="Submit">Submit</button> 
        </div> 
       </div> <!-- close modalcol1 --> 
      </div> <!-- close modalcontainer --> 
     <div class="overlay"></div> 
    </div> <!-- close modalwrapper --> 
</form> 

내 자바 스크립트

$(document).on("click","input[name='txt1']", function() 
{ 
    $('#modal').show(); 
}); 

$(document).on("click","input[name='txt2']", function() 
{ 
    $('#modal2').show(); 
}); 

$(document).on("click",".btn1", function(){ 
    $('#modal').hide(); 
}); 

$(".radio").change(function() { 
     $(".radio").prop('checked', false); 
     $(this).prop('checked', true); 
    }); 

제 업무용 피들도 확인하십시오 : https://jsfiddle.net/fe73awsu/10/

코드도 지울 수 있습니까?

Answer 1

각 모달은 고유 ID가 있어야하며 각 링크는 고유 모달 ID를 참조 할 수 있습니다.

... 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true"></div> 
... 
<a href="#myModal2" data-toggle="modal"> 
... 
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 
... 

코드는 그것을 닫 ID 모달 윈도우의뿐만 아니라 버튼으로 문제가 있었다. 여기에서 수정했습니다 : https://jsfiddle.net/raviroshan/g77ngpat/1/