Modal

기본 사용

• 상태 클래스 (is-active)를 사용하여 토글한다.
• 주색 (Primary Color), 보조색 (Secondary Color), 단색 (Mono) 사용

<button class="gn-button">open modal</button>
<button class="gn-button is-secondary">open modal</button>
<button class="gn-button is-mono">open modal</button>

<div class="gn-modal is-static">
  <div class="modal-content" style="width: 550px">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <div class="modal-control">
        <span class="gn-icon is-close btnCloseModal">
          <i class="fas fa-times"></i>
        </span>
      </div>
    </div>
    <div class="modal-body">
      <div class="modal-body-content">
        <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
        <p>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.</p>
        <p>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.</p>
      </div>
    </div>
    <div class="modal-footer has-text-center">
      <button type="button" class="gn-button">확인</button>
      <button type="button" class="gn-button btnCloseModal is-cancel">취소</button>
    </div>
  </div>
</div>

생성 옵션

  <button class="gn-button new-modal">Modal 예제보기</button>
  <button class="gn-button new-popup">Popup 예제보기</button>
  <button class="gn-button new-modal-extra">Modal(Extra) 예제보기</button>

  Gn.create('button', {
    target: '.new-modal',
    onClick: function(){   
      Gn.create('modal', {
        textSets : { title: '새로운 모달' },
        hasConfirm: true,
        hasCancel: true,
        height: 600,
        onConfirm: function () {
          console.log('확인하였습니다.');
        },
        contents: `
          <ul class="gn-list is-medium">
            <li>Ad nisi excepteur nostrud in.</li>
            <li>Commodo duis anim excepteur qui.</li>
            <li>Centered Text</li>
          </ul>`
      });
    }
  });
  Gn.create('button', {
    target: '.new-popup',
    onClick: function(){   
      Gn.create('modal', {
        textSets : { title: '새로운 팝업' },
        contents: `
        <table class="gn-table is-full">
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr class="is-primary-light">
            <td>5</td>
            <td>6</td>
            <td class="is-primary">7</td>
            <td>8</td>
          </tr>
          <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
          </tr>
          <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
          </tr>
        </table>`,
        isModal: false,
        draggable: true,
        minimized: true,
        resizable: true
      });
    }
  });
  Gn.create('button', {
    target: '.new-modal-extra',
    onClick: function () {
      Gn.create('modal', {
        textSets: { title: 'Extra Buttons Demo' },
        hasCancel: true,
        height: 400,
        extraButtons: [
          { key: 'edit-template', label: '수정(템플릿만적용)', className: 'is-small is-primary' },
          { key: 'edit-bulk', label: '수정(용도일괄적용)', className: 'is-small is-mono' }
        ],
        onExtra: function (actionKey) {
          console.log('extra clicked:', actionKey);
        }
      });
    }
  });

메소드