Question

我有两个带有id1和id2的模态，我想根据拨片开关的状态打开其中一个模态。当开关处于'关闭状态'时，需要打开ID为'id1'的模态并切换时处于“开启状态”，需要打开ID为“id2”的模态。目前在'onChange'事件中，我添加了需要打开'data-open'和'aria-controls'属性的模态id。

$('#button-id1').attr('data-open', 'id1');
$('#button-id1').attr('aria-controls', 'id2');

但这是第一次工作，当我关闭打开的模态时，切换桨显示以前打开的模态。谁能让我知道这里会发生什么？

Answer 1

试试这个

$('#id1').modal("hide");

它应该在if语句中，当开关处于开启状态时，你的模态的选择器id应该是你要隐藏或删除的模态，否则是关闭状态

if(switch_button == on_state){
    $('#id1').modal("show");
    $('#id2').modal("hide");
}else{
    $('#id1').modal("hide");
    $('#id2').modal("show");
}

如果你混淆了你必须放的条件。只是如果有一个班级打开或任何

的开关按钮

if($('#switch_button').hasClass('open')){}

如果您不想在更改开关时直接打开模态，可以在if语句中修改它

if(switch_button == on_state){
    $('button1 of the first modal').click(function(){
        $('#id1').modal("show");
        $('#id2').modal("hide");
    });
}else{
    $('button2 of the second modal').click(function(){
        $('#id1').modal("hide");
        $('#id2').modal("show");
    });
}

并确保你的模态有一个modal-lg类用于大型modal-md用于medium和modal-sm for small来看你的模态是不同的大小。

<!-- Large Modal Format -->
        <div class="modal fade" id="large" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- Modal Content Here -->
                </div>
            </div>
        </div>

        <!-- Medium Modal Format -->

        <div class="modal fade" id="medium" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <!-- Modal Content Here -->
                </div>
            </div>
        </div>

        <!-- Small Modal Format -->
        <div class="modal fade" id="small" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <!-- Modal Content Here -->
                </div>
            </div>
        </div>
        <!-- End Modal -->

Bootstrap模态切换

1 个答案: