如何在 HTML/CSS 中使用語義 UI 創建模態？

Question

所以我正在使用 html 創建一個 GUI，並希望通過單擊按鈕打開一個模式。 我需要什么 JS 才能做到這一點？ 下面是帶有基本模式的代碼，我只需要 JS 即可打開它。 我正在使用 nodejs 和電子。

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

您需要在模態上調用show方法，要在按鈕單擊時執行此操作，您需要將其放入單擊事件中。

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

工作JSFiddle