<div>
  <div id="target-text" class="is-size-1">sample text</div>
  <div>
    <button class="button is-primary update-modal">Update</button>
  </div>
</div>
<div id="update-modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Update Text</p>
      <button class="delete update-modal-close" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <form>
        <div class="field">
          <label class="label">Text</label>
          <input type="text" id="update-text" name="update-text" class="input" value="" />
        </div>
      </form>
    </section>
    <footer class="modal-card-foot">
      <button id="save" class="button is-success">Save changes</button>
      <button class="button update-modal-close">Cancel</button>
    </footer>
  </div>
</div>
$(".update-modal").click(function () {
  $("#update-modal").addClass("is-active");
  $("#update-text").val($("#target-text").text());
});

$(".update-modal-close").click(function (e) {
  e.preventDefault();
  $("#update-modal").removeClass("is-active");
});

$("#save").click(function (e) {
  e.preventDefault();
  $("#update-modal").removeClass("is-active");
  $("#target-text").text($("#update-text").val());
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js