如何在模態下設置條件

我需要幫助。我不知道什麼是問題，但第一個模式彈出，而第二個模式不是。如何在模態下設置條件

我的程序是這樣工作的。

我的兩個模式應該是點擊它結束後但，當它再次打開檢查複選框應保留像我的第一個模式。
什麼，我想在我的第二個模式做的是，我希望它表現得像單選按鈕，這意味着我只能選擇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>

我的JavaScript

$(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/

你也可以清潔我的代碼嗎？

來源

2017-01-20 Durex

你有一個TYPO。它應該是'$（'＃moda2'）。show（）;'，請參閱https://jsfiddle.net/5fdn2jaa/ – Satpal

@Satpal嘿，我更新了我的jsfiddle和我的文章。請幫助我:( – Durex

每個模態必須有一個唯一的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/

來源

2017-01-20 14:04:04 Ravi

）嘿，夥計，你編輯的部分在哪裏？我不能看到它，但它現在工作的很好，你能告訴我這裏還是隻是對小提琴發表評論還有一件事，你可以編輯我的javascript相同的概念，我認爲我有點混亂 – Durex

哦，現在我看到了它，你爲它分配每個ID，謝謝兄弟你能修正我的JavaScript的方式與相同的概念嗎？它很凌亂：D – Durex

@ NiCeMaRK：如果它正在爲你工作，那麼你可以將答案標記爲已接受/ Upvote 我只是在HTML中做了一些改變 - Modals和Button中的唯一ID，以及JS中隱藏模式在btn2點擊。你可以比較完整的變化與你的版本@ https://jsfiddle.net/raviroshan/g77ngpat/1/ – Ravi

如何在模態下設置條件

回答

相關問題