I copied this code from the internet, from here
It is used to show multiple forms in a single modal by sliding off the old fieldset and sliding in the new fieldset.
<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>
It works ok but when I close the modal when I'm in the 2nd or 3rd or 4th fieldset, it shows where the fieldset where I stopped. So I tried to do what the pervious button would do(slide out the current fieldset and show the previous) whenever I click the button to open the modal.
I have 5 fieldsets in my application. I keep track of current fieldset and when opening the modal again, I slide out the fieldset that was there before closing the modal and show the first fieldset.
But this is not ok.. I see a smaller fieldset over a bigger fieldset and sometimes I don't see anything but the modal header and sometimes just a small fieldset like the image below it's all messed up.
How do I show the first fieldset always when I open the modal?
The code to show next fieldset when a button with class .nextO is clicked.
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'
});
The code to go to previous fieldset(which is what I use when the modal is first opened so that it always shows the first).
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'
});
Is there a proper way to show the first fieldset when I open the modal. This is what it looks like. The fieldset does not fill the modal 
from Show first form in multi step modal
No comments:
Post a Comment