메시지 프롬프트 효과를 구현하기 위한 notie.js 플러그인 기반 순수 JavaScript

이 글에서는 메시지 프롬프트 효과를 구현하기 위한 순수 JavaScript의 예를 소개합니다. 이는 입력이 포함된 경고 프롬프트 상자, 확인 상자 및 메시지 상자를 생성할 수 있는 notie.js 기반 플러그인입니다. 구체적인 내용은 다음과 같습니다

렌더링:

구현 코드:
HTML 코드:

<br><br><br><br><br><br>
  <article class="zzsc">
    <div class="div-ext">
      <div class="div-int">
 
        <span>Test notie with these buttons:</span>
        <br>
        <button onclick="success();">Success</button>
        <button onclick="warning();">Warning</button>
        <button onclick="error();">Error</button><br>
        <button onclick="info();">Information</button>
        <button onclick="confirm();">Confirm</button>
        <button onclick="input();">Input</button>
        <br>
 
 
      </div>
    </div>
  </article>

js 코드:

function success() {
      notie.alert(1, 'Success!', 2);
    }
 
    function warning() {
      notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
    }
 
    function error() {
      notie.alert(3, 'Error.', 2);
    }
 
    function info() {
      notie.alert(4, 'Information.', 2);
    }
 
    function confirm() {
      notie.confirm('Are you sure you want to do that&#63;<br><b>That\'s a bold move...</b>', 'Yes', 'Cancel', function () {
        notie.alert(1, 'Good choice!', 2);
      });
    }
 
    function input() {
      notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function (value_entered) {
        notie.alert(1, 'You entered: ' + value_entered, 2);
      });
    }

이 기사가 자바스크립트 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.