<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header text-center">

                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body mx-3">

                <div class="md-form mb-5">

                    <i class="fa fa-envelope prefix grey-text"></i>

                    <input type="email" id="defaultForm-email" class="form-control validate">

                    <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>

                </div>

​

                <div class="md-form mb-4">

                    <i class="fa fa-lock prefix grey-text"></i>

                    <input type="password" id="defaultForm-pass" class="form-control validate">

                    <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>

                </div>

​

            </div>

            <div class="modal-footer d-flex justify-content-center">

                <button class="btn btn-default" data-toggle="modal" data-target="#modalConfirmDelete">Login</button>

            </div>

        </div>

    </div>

</div>

<!--Modal: modalConfirmDelete-->

<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

  aria-hidden="true">

  <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">

    <!--Content-->

    <div class="modal-content text-center">

      <!--Header-->

      <div class="modal-header d-flex justify-content-center">

        <p class="heading">Are you sure?</p>

      </div>

​

      <!--Body-->

      <div class="modal-body">

​

        <i class="fa fa-times fa-4x animated rotateIn"></i>

​

      </div>

​

      <!--Footer-->

      <div class="modal-footer flex-center">

        <a href="" class="btn  btn-outline-danger">Yes</a>

        <a type="button" class="btn  btn-danger waves-effect" data-dismiss="modal">No</a>

      </div>

    </div>

    <!--/.Content-->

  </div>

</div>

<!--Modal: modalConfirmDelete-->

​

<div class="text-center">

    <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch Modal Login Form</a>

</div>