Question

我从here的互联网上复制了此代码

通过滑出旧的字段集并滑入新的字段集，可以在一个模态中显示多种形式。

      <div class="modal-content">

         <!-- MultiStep Form -->
         <div class="row">
            <div class="col-md-12 ">
               <form id="msform" name="flatform" ng-submit="addflatinfo(flat, flatform)" novalidate>
                  <div class="modal-header">
                   <h4 class="modal-title" id="exampleModalLabel">Add flat</h4>
                  </div>

                  <!-- First fieldset -->
              <fieldset class="firstFieldSet">
                     <h4>
                        adf
                     </h4>
                     <div class="row">
                     ....
                  <input type="button" name="nextOcc"
                     class="nextO action-button 
                     adFlatSecondFieldsetCl" 
                     value="Next" />
              </fieldset>
           <!--Second fieldset -->
              <fieldset class="secondFieldSet">
                     <h4>
                        adf
                     </h4>
                     <div class="row">
                     ....

             </fieldset>

它可以正常工作，但是当我在第二，第三或第四字段集中关闭模态时，它显示了该字段集停止的位置。因此，每当我单击该按钮以打开模态时，我都试图做前一个按钮会做的事情（滑出当前字段集并显示前一个字段集）。

我的应用程序中有5个字段集。我跟踪当前的字段集，并再次打开模态时，我滑出了该字段集，然后关闭了该模态并显示了第一个字段集。

但这不行。我看到一个较小的字段集大于一个较大的字段集，有时除了模态标题外什么也看不到，有时只是一个小的字段集，如下面的图像一样，都弄乱了。

打开模态时如何始终显示第一个字段集？

单击具有类.nextO的按钮时显示下一个字段集的代码。

current_fs = $(".nextO").parent();
        next_fs = $(".nextO").parent().next();

        //activate next step on progressbar using the index of next_fs
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

        //show the next fieldset
        next_fs.show(); 
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
            step: function(now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale current_fs down to 80%
                scale = 1 - (1 - now) * 0.2;
                //2. bring next_fs from the right(50%)
                left = (now * 50)+"%";
                //3. increase opacity of next_fs to 1 as it moves in
                opacity = 1 - now;
                current_fs.css({
                    'transform': 'scale('+scale+')',
                    'position': 'absolute'
                });
                next_fs.css({'left': left, 'opacity': opacity});
            }, 
            duration: 800, 
            complete: function(){
                current_fs.hide();
                animating = false;
            }, 
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
        });

转到上一个字段集的代码（这是我第一次打开模式时使用的代码，以便它总是显示第一个）。

if(animating) return false;
    animating = true;
    //fade remove the fieldset which was open before closing the modal -- $scope.currentAdFieldset 
    current_fs = $($scope.currentAdFieldset).parent();
    previous_fs = $('.adFlatSecondFieldsetCl').parent().prev();
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    console.log(previous_fs, "prevfs");
    previous_fs.show(); 
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left,  });
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});

        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });

打开模态时，是否有适当的方法显示第一个字段集。这就是它的样子。该字段集未填充模式

编辑： 我在打开模式的按钮的ng-click上尝试过

$('.modal-content fieldset').css('opacity', '0');
    $('.modal-content fieldset').first().css('opacity', '1');
    $('.modal-content fieldset').first().show();
    $("#progressbar li:not(:eq(0))").removeClass('active');
    $('#apartmentsmodel').modal({ backdrop: 'static', keyboard: false, show: true });

编辑2：

我尝试了这个，并给出了答案，并且有效：

$('.modal-content fieldset').css({'opacity': '0','display':'none', 'transform' : 'scale(1)'});
    $('.modal-content fieldset').first().css({'opacity': '1', 'transform' : 'scale(1)', 'display':'block'});

Answer 1

尝试此代码段。它使用1 a事件（more info）来检查是否已打开模式。

show.bs.modal

这已通过plugin you specified中的示例代码进行了测试。在Bootrap 4模式下使用该站点上的Download中的html，css和jquery，它可以正常工作。

更新

<script type="text/javascript">
    $(document).ready(function () {

        $('body').on('show.bs.modal', function () {

            //hide all the fieldsets
            $('.modal-content fieldset').css('opacity', '0');

            //show the first fieldset
            $('.modal-content fieldset').first().css('opacity', '1');
            $('.modal-content fieldset').first().show();

            //make sure the progress bar also show the first only
            $("#progressbar li:not(:eq(0))").removeClass('active');

        });

    });
</script>

在多步模态中显示第一种形式

1 个答案: