Warning on modal close

Question

On a page, I'm going to have a bootstrap modal with a form that will not be necessary to be all filled in one go.

Is there a way that, when the user hits the close button on the modal, to have a warning popup with confirm close and cancel close?

Solution

Assuming you have 2 modals

1. one for form (first modal) and 2nd for warning to close modal (both modals)

2. and using bootstrap default modal behaviour data-toggle and data-target to invoke the first modal (with form)

Important:

1. Make sure you add data-backdrop="static" and data-keyboard="false" in Form Modal trigger button so it will not be closed when click outside the modal otherwise the whole solution is useless.

2. Make sure you add data-backdrop="false" in Warning Modal so there will be only one back-drop for first modal.

Changes:

1. Remove data-dismiss="modal" from both Header / Footer Close Button of Form Modal

2. Add data-dismiss="modal" to Warning Modal Cancel Close button just only to dismiss Warning modal

3. Add class closefirstmodal in Form Modal Header / Footer Close button to invoke the warning modal with jQuery click function and bootstrap modal event listener

4. Add class confirmclosed in Warning Modal Confirm close Button which will use to close both Form / Warning Modals with jQuery click function and hide both Modal via jQuery $('#Modalselector').modal('hide')

Modal's HTML

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Form" data-backdrop="static" data-keyboard="false">Open Modal</button>
<!-- Modal With Form -->
<div id="Form" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close closefirstmodal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <p>Some Form Elements Here</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default closefirstmodal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal With Warning -->
<div id="Warning" class="modal fade" role="dialog" data-backdrop="false">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <p>This Is A Warning Message</p>
                <button type="button" class="btn btn-danger confirmclosed">Confirm Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel Close</button>
            </div>
        </div>
    </div>
</div>

JS with B.S modal Event Listener (You can skip the event listener but I prefer this way)

//jQuery and Bootstrap Lib's always comes first
$(document).ready(function () { //Dom Ready
    $('.closefirstmodal').click(function () { //Close Button on Form Modal to trigger Warning Modal
        $('#Warning').modal('show').on('show.bs.modal', function () { //Show Warning Modal and use `show` event listener
            $('.confirmclosed').click(function () { //Waring Modal Confirm Close Button
                $('#Warning').modal('hide'); //Hide Warning Modal
                $('#Form').modal('hide'); //Hide Form Modal
            });
        });
    });
});

Fiddle example-1

JS without B.S modal Event Listener

$(document).ready(function () {
    $('.closefirstmodal').click(function () {
        $('#Warning').modal('show');
    });

    $('.confirmclosed').click(function () {
        $('#Warning').modal('hide');
        $('#Form').modal('hide');
    });
});

Fiddle Example-2