Question

我需要帮助。我不知道问题是什么，但是第一个模态弹出而第二个不是。

我的程序就像这样。

我的两个模态在关闭后都应该是可点击的，但是当它再次打开时，选中的复选框应该像我的第一个模态一样保留。
我想在第二个模态上做的是我希望它表现得像单选按钮，意思是我只能选择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/

你还可以清理我的代码吗？

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/

如何在模态中设置条件

1 个答案: