<!-- Button trigger modal -->

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

  Launch demo modal

</button>

​

<!-- Modal -->

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

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

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

      </div>

      <div class="modal-body">

        <div class="form-outline" data-mdb-input-init>

          <input type="text" id="copy-target-4" class="form-control" />

          <label class="form-label" for="copy-target-4">Type here text to copy</label>

        </div>

        <button id="myExample" class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-4" data-mdb-ripple-init>

          Copy

        </button>

      </div>

      <div class="modal-footer">

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

        <button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>

      </div>

    </div>

  </div>

</div>

​

​

<div

     class="alert fade mt-5"

     id="container-example"

     role="alert"

     data-mdb-alert-init

     data-mdb-color="primary"

     data-mdb-hidden="true"

     data-mdb-autohide="true"

     data-mdb-delay="4000"

     data-mdb-position="top-right"

     data-mdb-width="25%"

     >

  Text copied!

</div>