如何在 HTML/CSS 中使用语义 UI 创建模态？

Question

So I'm creating a GUI using html and want to open a modal on the click of a button. What JS would I need to make this happen? Below is the code with a basic modal all I need is the JS to make it open. I'm using nodejs and electron.

HTML

    <div style = 'position: fixed; top: 25px; left: 900px ' class = 'ui container'>
      <input type="button" id="sTask" class = 'ui inverted basic green button' value="Start Tasks">
      <input type="button" id="eTask" class = 'ui inverted basic yellow button' value="End Tasks">
      <input type="button" id="dTask" class = 'ui inverted basic red button' value="Delete Tasks">
    </div>

      <div style ="position:fixed; top: 25px; left: 102px">
        <button id="cTask" class = 'ui inverted basic blue button' data-modal-target="empty">Create New Task </button>

        <div id="modal" class="ui basic modal" data-model="empty">
          <div class="ui icon header">
            Archive Old Messages
          </div>
          <div class="content">
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
                No
            </div>
          <div class="ui green ok inverted button">
              <i class="checkmark icon"></i>
                Yes
          </div>
        </div>
    </div>

Answer 1

You need to call the show method on the modal, to do it on button click you need to put it in a click event.

$('#modalbutton').on('click', () => {
  $('#modal')
    .modal('show');
})

Working JSFiddle