<!-- Button trigger modal -->

<button type="button" class="btn btn-primary m-1" data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#exampleSideModal1">

  Top right

</button>

​

<!-- Modal example - top right -->

<div class="modal fade right" id="exampleSideModal1" tabindex="-1" aria-labelledby="exampleSideModal1" aria-hidden="true">

  <div class="modal-dialog modal-side modal-bottom-left">

    <div class="modal-content">

      <div class="modal-header bg-info text-white">

        <h5 class="modal-title" id="exampleSideModal1">Product in the cart</h5>

        <button type="button" class="btn-close btn-close-white" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        <div class="row">

          <div class="col-3 text-center">

            <i class="fas fa-shopping-cart fa-4x text-info"></i>

          </div>

​

          <div class="col-9">

            <p>Do you need more time to make a purchase decision?</p>

            <p>No pressure, your product will be waiting for you in the cart.</p>

          </div>

        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-info" data-mdb-ripple-init>Go to the cart</button>

        <button type="button" class="btn btn-outline-info" data-mdb-ripple-init data-mdb-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>