Question

我在模态内添加了Bootstrap Wizard，并且仅当Wizard上确实存在DOM时才需要初始化width，因为我必须计算{{1} }，如果我执行模态关闭：

$('.card-wizard').width()

我得到：0，如果我执行上面的相同命令时打开模态，我得到465。问题是打开模态后我必须计算width，否则width()方法将返回0。

到目前为止，我尝试过的是：

$('a[href="#account"]').on('shown.bs.tab', function(){
    $('.card-wizard').bootstrapWizard({
         onInit: function(tab, navigation, index){
            let width = $('.card-wizard').width();
         }
    });
});

该标签的定义方式如下：

<div class="wizard-navigation">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#account" data-toggle="tab" role="tab">
                Account
            </a>
        </li>

并且该向导包含在member-modal中，该{@ 1使用$('#member-modal').modal('show');

打开

有没有一种方法可以在模态显示之后初始化BootStrap Wizard？

Answer 1

宽度为0，因为您的元素位于隐藏的模态内。

您可以使用.show( complete )解决。

摘要：

$('#exampleModal').show('show', function() {
    var x = $('.wizard').width();
    $('#exampleModal').hide();
    console.log('width: ' + x);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.bootstrapwizard.com/demo/bootstrap-wizard.css">
<script src="http://www.bootstrapwizard.com/demo/bootstrap-wizard.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body wizard">
                <ul class="nav nav-wizard">
                    <li>
                        <a href="#step1">Step 1</a>
                    </li>
                    <li>
                        <a href="#step2">Step 2</a>
                    </li>
                    <li>
                        <a href="">Step 3</a>
                        <ul class="nav nav-wizard">
                            <li>
                                <a href="#step3a">Step 3A</a>
                            </li>
                            <li>
                                <a href="#step3b">Step 3B</a>
                            </li>
                            <li>
                                <a href="#step3c">Step 3C</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#step4">Step 4</a>
                        <ul class="nav nav-wizard">
                            <li>
                                <a href="#step4a">Step 4A</a>
                            </li>
                            <li>
                                <a href="#step4b">Step 4B</a>
                            </li>
                            <li>
                                <a href="#step4c">Step 4C</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#step5">Step 5</a>
                    </li>
                </ul>

                <div class="wizard-pane" id="step1">
                    <h3>Step 1</h3>
                </div>

                <div class="wizard-pane" id="step2">
                    <h3>Step 2</h3>
                </div>

                <div class="wizard-pane" id="step3a">
                    <h3>Step 3A</h3>

                    <p>Step 3 href is empty, so the first child is selected</p>
                </div>

                <div class="wizard-pane" id="step3b">
                    <h3>Step 3B</h3>
                </div>

                <div class="wizard-pane" id="step3c">
                    <h3>Step 3C</h3>
                </div>

                <div class="wizard-pane" id="step4">
                    <h3>Step 4</h3>
                </div>

                <div class="wizard-pane" id="step4a">
                    <h3>Step 4A</h3>
                </div>

                <div class="wizard-pane" id="step4b">
                    <h3>Step 4B</h3>
                </div>

                <div class="wizard-pane" id="step4c">
                    <h3>Step 4C</h3>
                </div>

                <div class="wizard-pane" id="step5">
                    <h3>Step 5</h3>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Answer 2

我感谢gaetano的解决方案，但我会提出另一种解决方案，并将其添加到show事件中：

$('#member-modal).focus();

然后创建：

$('#member-modal').on('focus', function () {
    //init wizard..
});

模态打开后如何执行功能？

2 个答案: