ngzhian / multi-step-modal Goto Github PK

View Code? Open in Web Editor NEW

112.0 112.0 58.0 35 KB

Multi-step modals for Bootstrap

License: MIT License

HTML 59.47% JavaScript 40.53%

multi-step-modal's Introduction

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

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:

Your modals should have the class modal multi-step (boostrap requirement)
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>
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

multi-step-modal's People

Contributors

Stargazers

Watchers

Forkers

alexfabris bacsa michaelbrowne alantorrico robopython waspfreak touchart yuema imcoates johnclinton17 dacoolman jeremts77 rorito mdahmann rxs3072 gushecht cdtx anupreetkaur85 j3frsn despinozac hashmab raj347 ahammad1 diyaaelhak apowell656 ebiasini lauramulas stuartsharpe11 kerz1488 lizkline91 jackdeadman alexdev1 kry-dev nealshail vitaliydanilko naphyrion selected-pixel-jameson alexszilagyi valdupin codemewell lutfibaihaqi timpotter fernan-x nkhlpurple nlundbye itsthejoker farianfossy pavitra93 drosca trianity shangshanruoshui77 aniket1418 upasyo dwisusanto29 realdev22 trend20 hopeswiller

multi-step-modal's Issues

Opening modal with only JS

Would it be possible to open a modal with only JS and no data-toggle or data-target attributes?

Add license

Can you please add a LICENSE? Without it's not clear if we're permitted to use your work.

Thanks for sharing this component!

Does this work with Gravity multistep forms?

I am trying to find something that will work with gravity multistep forms. Can anyone post an example?

any plan on bs4?

Not an issue, just ask some questions.
lately I am working on a project on bs4 and I need this functionality. Can you be kind to offer some suggestions? And sorry for taking your time. Thanks

<a> in modals

I want to use tags to redirect the user to a NON Modal page when clicked. The issue with this is the modals never get closed so there remains the darkened background when the page goes to the link.

More steps than 3...

You have one bug, if you try to add more steps than 3, progress bar will behave weird.

Problem is with variable total_num_steps
var total_num_steps = $buttons.length; // line 9 in multi-step-modal.js

Number of buttons is not good indicator of total_num_steps, i switch this to:

var total_num_steps = $modal.find('.modal-title').length; // and everything work properly.

Creating a back button.

The examples within the index.html is now outdated and no longer works due to the recent update from counting "Modal-body" instead of the "Data-step" within the class.

Progress Bar

I will suggest instead of the ff lines in updating the progress bar
var $buttons = $modal.find('button.step');
var total_num_steps = $buttons.length;
the following lines should be used
var $div_total = $modal.find('div[data-step]');
var total_num_steps = $div_total.length;
this will give a more accurate reflection of the
total_num_steps variable irrespective the number of buttons added to reflect user needs