Skip to content

ngzhian/multi-step-modal

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 6, 2015 10:13
September 11, 2016 21:21
March 24, 2019 23:13
September 28, 2014 18:25

Multi-Step Modal

A library to help you make multi-step modals, such as a multi-page registration form.

It depends on bootstrap for the modal and jQuery for everything else.

Check out the demo

Screenshot of Multi-Step Modal

Quick start

Add the js file at the bottom of the page.

<form class="modal multi-step" id="demo-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title step-1" data-step="1">Step 1</h4>
                <h4 class="modal-title step-2" data-step="2">Step 2</h4>
            </div>
            <div class="modal-body step step-1">
            This is step 1.
            </div>
            <div class="modal-body step step-2">
            This is step 2.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary step step-1" data-step="1" onclick="sendEvent()">Continue</button>
            </div>
        </div>
    </div>
</form>
<button class="btn btn-default" data-toggle="modal" data-target="#demo-modal">Show</button>
<script src="/path/to/multi-step-modal.js"></script>
<script>
sendEvent = function() {
    $('#demo-modal').trigger('next.m.2');
}
</script>

Follow these conventions:

  1. Your modals should have the class modal multi-step (boostrap requirement)
  2. Buttons that bring the user to the next step should have class step, and also the attribute data-step set to whichever step this button appears on. e.g. a button that is on step 1 (brings the user from step 1 to 2) should be <button type="button" class="step" data-step="1"></button>
  3. Content you want to show at step 1 should have class step-1, and so on.

How this works

There are conventions to follow This depends on bootstrap for modals, which are elements with the class modal.

For each modal on the page it attaches event listeners to 1. the modal 2. the buttons in the modal The modal and its buttons reac to a events of the form next.m.x, where x corresponds on the step the button show trigger the visibility of.

The close button is visible in all steps.

Progress indicators are available, visible in the demo.

Events based

Buttons have events bound, and modals also have the same events abount. When you want to transit into the next step, trigger the event on either a speicifc button or on the modal (which is easier).

FAQ

How to reset step on popup close?

This is not supported natively by the library, but you can do something like what is describe here.

License

MIT

About

Multi-step modals for Bootstrap

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published