Question

我在这里使用多模式

https://github.com/ngzhian/multi-step-modal

确切地说，第三个示例（不带进度条的后退按钮）。

https://www.ngzhian.com/multi-step-modal/

但是我准备的是我正在用数据完成的模态。我的模态：

<form class="modal multi-step" id="demo-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="modal-header">

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

            </div>
            <div class="modal-footer" id="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary step step-1" data-step="1" onclick="sendEvent(2)" >Próximo</button>

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

和JS（是循环代码）

    if (i == 0 || (i + 1) == files.length) {
        if (i == 0) {
            var header = '<h4 class="modal-title step-' + (i + 1) + '" data-step="' + (i + 1) + '"  > HEaderModal  </h4>';
            var body = '<div class="modal-body  step-' + (i + 1) + '" data-step="' + (i + 1) + '"  >This is step ' + (i + 1) + '.</div>';
            $("#modal-header").append(header);
            $("#modal-body").append(body);
        } else {
            var header = '<h4 class="modal-title step-' + (i + 1) + '" data-step="' + (i + 1) + '" > HEaderModal  </h4>';
            var body = '<div class="modal-body  step-' + (i + 1) + '" data-step="' + (i + 1) + '"  >This is step ' + (i + 1) + '.</div>';
            var footer = '<button type="button" class="btn btn-primary step step-' + (i + 1) + '" data-step="' + (i + 1) + '" onclick="sendEvent(' + (i) + ')" >Atrás</button>'
            $("#modal-header").append(header);
            $("#modal-body").append(body);                    
            $("#modal-footer").append(footer);
        }
    } else {
        var header = '<h4 class="modal-title step-' + (i + 1) + '" data-step="' + (i + 1) + '"> HEaderModal  </h4>';
        var body = '<div class="modal-body  step-' + (i + 1) + '" data-step="' + (i + 1) + '"  >This is step ' + (i + 1) + '.</div>';
        var footer = '<button type="button" class="btn btn-primary step step-' + (i + 1) + '" data-step="' + (i + 1) + '" onclick="sendEvent(' + (i) + ')" >Atrás</button> \
                      <button type="button" class ="btn btn-primary step step-' + (i + 1) + '" data-step="' + (i + 1) + '" onclick="sendEvent(' + (i + 2) + ')" >Próximo</button>';
        $("#modal-header").append(header);
        $("#modal-body").append(body);
        $("#modal-footer").append(footer);
    }

接下来我展示模式

$('#demo-modal').modal();

并且要更改模式页面，请使用

sendEvent = function (step) {
    $('#demo-modal').trigger('next.m.' + step);
}

不幸的是，出现了模态，但是所有内容都在一个窗口中，而不是一步一步地显示。

有什么办法可以解决这个问题？预先谢谢你。

Answer 1

我为我寻找解决方案。

我注意到，首先我为多步模式加载了js文件，然后将东西添加到该模式中，但是它们没有任何应有的属性。因此，不是在开始时添加脚本，而是在将所有信息添加到模式

之后加载该脚本。

$.getScript("@Url.Content( "~/multi-step-modal.js")");

希望对您有所帮助！

在JS中添加标题，正文和按钮的Multi Modal不起作用

1 个答案: