Question

我对Bootstrap 3 modals有疑问。我有一个按钮，打开一个包含一些内容和另一个按钮的模态。

如果单击此按钮，此模式将关闭并显示新的确认模式，但我现在屏幕右侧有一个滚动条。

我在HTML代码中看到，类modal-open未再次添加回body标记。

我尝试了以下但没有成功：

_btnConfirmResignation.click(function () {
    _modalResignation.modal('hide');

    _modalResignation.on('hidden.bs.modal', function (e) {
        //_modalConfirmResignation.modal('show');

        // EDIT: this works
        setTimeout(function () { _modalConfirmResignation.modal('show'); }, 0);
    });

    //_modalConfirmResignation.on('show.bs.modal', function (e) {
    //   $('body').addClass('modal-open');
    //});
});

有人为此提供解决方案吗？

修改

我的辞职模式：

    <!-- Modal Resignation -->
<div class="modal fade" id="modalResignation" tabindex="-1" role="dialog" aria-labelledby="modalResignationLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalResignationLabel"><i class="icon-check"></i>Einde contract registreren</h4>

            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label for="txtEmployeeDateResignation">Einddatum:</label>       
                            <div class="input-group date date-resignation">
                                <asp:TextBox runat="server" ID="txtEmployeeDateResignation" CssClass="form-control" />
                                <span class="input-group-addon"><i class="icon-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="txtResignationRemark">Opmerking:</label>                              
                            <asp:TextBox runat="server" ID="txtResignationRemark" TextMode="MultiLine" CssClass="form-control" />    
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="icon-ban-circle"></i><span>Annuleren</span></button>
                <button type="button" class="btn btn-custom" id="btnConfirmResignation"><i class="icon-ok"></i><span>Contract beëindigen</span></button>

            </div>
        </div>
    </div>
</div>

我的确认模式：

<!-- Model confirm resignation -->
<div class="modal fade" id="modalConfirmResignation" tabindex="-1" role="dialog" aria-labelledby="modalConfirmResignationLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modalConfirmResignationLabel"><i class="icon-check"></i>Einde contract registreren</h4>

            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-12">
                        <p>Bent u zeker dat u deze persoon zijn contract wil beëindigen? Indien u door gaat, wordt deze persoon volledig geblokkeerd.</p>
                    </div>
                </div>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="icon-ban-circle"></i><span>Annuleren</span></button>
                <button type="button" class="btn btn-custom" runat="server" id="btnSaveResignation" onserverclick="btnSaveResignation_click"><i class="icon-ok"></i><span>Bewaren en doorgaan</span></button>

            </div>
        </div>
    </div>
</div>

Bootstrap 3多模态问题

0 个答案: