<button

  type="button"

  class="btn btn-primary"

  data-mdb-ripple-init

  data-mdb-modal-init

  data-mdb-target="#exampleModal"

  data-mdb-whatever="@mdo"

>

  Open modal for @mdo

</button>

<button

  type="button"

  class="btn btn-primary"

  data-mdb-ripple-init

  data-mdb-modal-init

  data-mdb-target="#exampleModal"

  data-mdb-whatever="@fat"

>

  Open modal for @fat

</button>

<button

  type="button"

  class="btn btn-primary"

  data-mdb-ripple-init

  data-mdb-modal-init

  data-mdb-target="#exampleModal"

  data-mdb-whatever="@getbootstrap"

>

  Open modal for @getbootstrap

</button>

​

<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">New message</h5>

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

      </div>

      <div class="modal-body">

        <form>

          <div class="mb-3">

            <label for="recipient-name" class="col-form-label">Recipient:</label>

            <input type="text" class="form-control" id="recipient-name" />

          </div>

          <div class="mb-3">

            <label for="message-text" class="col-form-label">Message:</label>

            <textarea class="form-control" id="message-text"></textarea>

          </div>

        </form>

      </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>Send message</button>

      </div>

    </div>

  </div>

</div>

​

const exampleModal = document.getElementById('exampleModal');

exampleModal.addEventListener('show.mdb.modal', (e) => {

  // Button that triggered the modal

  console.log("");

  const button = e.relatedTarget;

  // Extract info from data-mdb-* attributes

  const recipient = button.getAttribute('data-mdb-whatever');

  // If necessary, you could initiate an AJAX request here

  // and then do the updating in a callback.

  //

  // Update the modal's content.

  const modalTitle = exampleModal.querySelector('.modal-title');

  const modalBodyInput = exampleModal.querySelector('.modal-body input');

​

  modalTitle.textContent = `New message to ${recipient}`;

  modalBodyInput.value = recipient;

})