jquery-bootstrap-modal-steps

Lightweight step by stepwise modal for bootstrap

What is this?

Sometimes you need break complex things in many parts. Forms, manuals, ideas. I like to thing that like steps. For example, if you need create a payment page. The first step is get the personal information from the client, then you need the payment information and after that you'll need the address for the shipment. This is not the correct order but works.

You can develop a big HTML form with all this stuff or ask to client in step by step.

What I need?

You'll need to know about bootstrap, html and a little bit of javascript. jQuery and Bootstrap must be installed in your project.

How to install

Using Bower:
$ bower install jquery-bootstrap-modal-stepwise

How to uninstall

Using Bower:
$ bower uninstall jquery-bootstrap-modal-stepwise

jQuery and Bootstrap are required so you need import them in your Html file before jquery-bootstrap-modal-steps:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script src="../dist/modal-steps.min.js"></script>

Configuring the Modal

Is pretty simple to work with Bootstrap modals. You can see more details here.

<div class="modal-header">
    <h4 class="js-title-step"></h4>
</div>

In your .modal-header you'll need use any Html tag with js-title-step class. I decide for H4 for estetic purposes. Don't put nothing inside this tag, the Javascript will do this.

After that, at the .modal-body you'll set the modal steps. Use a div tag with row and d-none class. Set the step order using data-step and step title with data-title.

<div class="modal-body">
    <div class="row d-none" data-step="1" data-title="This is the first step!">
        <div class="jumbotron">As you can see, this is the first step!</div>
    </div>
    <div class="row d-none" data-step="2" data-title="This is the second and last step!">
        <div class="jumbotron">As you can see, this is the second and last step!</div>
    </div>
</div>

Now, you'll set the action buttons. All you need is use js-btn-step and data-orientation attribute. Use data-orientation="previous" for previous buttons, data-orientation="next" for next buttons, and data-orientation="cancel" for cancel buttons.

<div class="modal-footer">
    <button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
    <button type="button" class="btn btn-warning js-btn-step" data-orientation="previous"></button>
    <button type="button" class="btn btn-success js-btn-step" data-orientation="next"></button>
</div>

Note you don't need set nothing inside the .js-btn-step.

Activate modals

You already have the modal, now you'll need activate it.

$('#modal-sample').modalSteps();

With this you can use steps with Bootstrap modals.

Don't forget that you need use a button to launch the Bootstrap modal. You can see more of this here

It's jQuery

You can use jQuery functions after modalSteps because this is a jQuery plugin (haha):

$('#modal-sample').modalSteps().find('#someDiv');

Callbacks

Using a callback when user complete modal's steps

You can set a callback when the user completes the modal steps.

var callback = function() {
    console.log('Congratulations!');
};

$('#modal-sample').modalSteps({
    completeCallback: callback
});

Callback for each step

When you need valid forms in each modal step, it's cool a callback for this

var callback = function() {
    console.log('Each step Callback!');
};

$('#modal-sample').modalSteps({
    callbacks: {
        '*': callback
    }
});

Callback for a specific step

Generally, you'll have a step pretty different of others and you must treat that. Use an specific callback for this. The key of the callback dictionary must be the step:

var callback1 = function() {
    console.log('A specific callback for step 1!');
};

var callback2 = function() {
    console.log('A specific callback for step 2!');
};

$('#modal-sample').modalSteps({
    callbacks: {
        '1': callback1,
        '2': callback2
    }
});

Get Title and Current Step for each step

When you need title and current step from in each modal step, it's cool do this

var callback = function(title, step) {
    console.log('Each step Title!', title);
    console.log('Each step Step!', step);
};

$('#modal-sample').modalSteps({
    getTitleAndStep: function(title, step) {
        callback(title, step);
    }
});

Customize buttons

The default values for buttons is:

Button Orientation	Value
previous	Previous
next	Next
cancel	Cancel
last	Complete

How to replace?

$('#modal-sample').modalSteps({
    btnCancelHtml: 'Quit',
    btnPreviousHtml: 'Back',
    btnNextHtml: 'Go',
    btnLastStepHtml: 'Finish'
});

Disabling next buttons

For validations purposes, you can need block the next buttons:

$('#modal-sample').modalSteps({
    disableNextButton: true
});