可堆叠弹出窗口引导模式关闭问题

stackable popup bootstrap modal close issue

本文关键字：模式 问题 窗口      更新时间：2023-09-26

我想在我的视图中显示Stackable Modal：

主体视图 

.....some code
  @*Pop Up ajout demande*@
                <div class="modal   fade" tabindex="-1" data-focus-on="input:first" role="dialog" id="addModal" style="height: 100%">
                    <div class="modal-dialog" style="width: 100%">
                        <div class="modal-content" style="width: 100%">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <label class="modal-title center-block" style="color:red; font-size:larger"></label>
                            </div>
                            <div class="modal-body">
                                @Html.Partial("AjouterDemandePopUp")
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" id="btnEscape">Quitter</button>
                            </div>
                        </div>
                    </div>
                </div>

部分视图 AjouterDemandePopUp

...........some code
      <div class="modal " tabindex="-2"   id="VehModal">
                                    <div class="modal-dialog" style="width: 100%">
                                        <div class="modal-content" style="width: 100%">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <label class="modal-title center-block" style="color:red; font-size:larger">Choix de véhicule</label>
                                            </div>
                                            <div class="modal-body">
                                                <p><label id="labchauffeurs">Chauffeurs disponibles</label> <select id="lstchauffeurs" name="lstchauffeurs" style="width:250px;  "></select>  </p>
                                                <p>
                                                    <table id="tblauto" class="table table-bordered table-striped">
                                                        <thead>
                                                            <tr style="color:white;background-color:#3c8dbc" id="autoheader">
                                                                <th></th>
                                                                <th>Chauffeur</th>
                                                                <th>Marque</th>
                                                                <th>Plaque d’immatriculation</th>
                                                                <th>Kilométrage</th>
                                                                <th>Année de fabrication</th>
                                                                <th>Carte de carburant </th>
                                                                <th>Observation</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="tblautoBody"></tbody>
                                                    </table>
                                                </p>
                                               </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnSetVehicle">Valider</button>
                                                <button type="button" class="btn btn-default" data-dismiss="modal" id="btnQuit">Annuler</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div>

问题是当我验证或关闭第二个弹出窗口(在部分视图中弹出(时，第一个弹出窗口将被关闭!!

我需要知道这种行为的原因吗？我该如何解决这个问题？

当您单击带有属性 data-dismiss="modal" 的按钮时，它将调用引导函数来关闭所有打开的模态。

而不是使用内置函数 - 创建自己的函数，这将关闭特定的模态。使用像 data-dismiss-modal="#modal_id" 这样的属性 - 那么你将只使用 id #modal_id 来消除模态

$(document).on('click', '[data-dismiss-modal]', function () {
    var target = $(this).attr('data-dismiss-modal');
    $(target).modal('hide');
});

示例：https://jsfiddle.net/73mdx4jm/

相关文章：