CodePen Embed - 입력 | Input - Popup

Live

​x
 
<div class="container-fluid">
  <button id="btnLogin" class="btn btn-primary">
    Log In
  </button>
​
  <button id="btnCreateAccount" class="btn btn-primary">
    계정 생성
  </button>
​
  <button id="btnEditAccount" class="btn btn-primary">
    계정 편집
  </button>
​
  <!-- Log In form -->
  <form id="frmLogin">
    <h4 class="modal-header">
      Log in
      <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
      <label>
        Email:
        <input class="form-control" required type="email" />
      </label>
      <br />
      <label>
        Password:
        <input class="form-control" type="password" required pattern=".{4,}"
               title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Remember Me
        <input type="checkbox" />
      </label>
      <br />
      <a href="" class="wj-hide-create">아직 계정이 없으신가요?</a>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Log in
      </button>
    </div>
  </form>
​
  <!-- Create Account form -->
  <form id="frmCreateAccount">
    <h4 class="modal-header">
      계정 생성
      <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
      <label>
        Name:
        <input id="name" class="form-control" required pattern=".{2,}"
               title="Please enter 2 characters or more." />
      </label>
      <br />
      <label>
        Email:
        <input id="email" class="form-control" type="email" required />
      </label>
      <br />
      <label>
        Password:
        <input id="password" class="form-control" type="password" required pattern=".{4,}"
               title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Confirm Password:
        <input id="confirm" class="form-control" type="password" />
      </label>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Create Account
      </button>
    </div>
  </form>
​
  <!-- Edit Account form -->
  <form id="frmEditAccount">
    <h4 class="modal-header">
      Edit Account
      <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
      <label>
        Email:
        <input id="edit-email" class="form-control" required type="email" />
      </label>
      <br />
      <label>
        Current Password:
        <input id="current-password" class="form-control" type="password" required pattern=".{4,}"
               title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        New Name:
        <input id="new-name" class="form-control" required pattern=".{2,}"
               title="Please enter 2 characters or more." />
      </label>
      <br />
      <label>
        New Password:
        <input id="new-password" class="form-control" type="password" required pattern=".{4,}"
               title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Confirm New Password:
        <input id="confirm-password" class="form-control" type="password" />
      </label>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Update Account
      </button>
    </div>
  </form>
</div>

Live

xxxxxxxxxx
 
@font-face {
  font-family: 'S-CoreDream-3Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
​
body {
  margin: 20px;
  font-family: 'S-CoreDream-3Light';
}
​
.modal-body {
  min-width: 300px;
}
​
input:invalid {
  border-color: red;
}
​
body {
  margin-bottom: 24pt;
}
.container-fluid{
  background-color:#ededed;
  padding:10px;
  border-radius:10px;
}
​
.btn-primary {
  background-color :#0786BD !important;
}

Live

xxxxxxxxxx
 
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    // create forms
    let frmLogin = new wijmo.input.Popup('#frmLogin'), frmCreateAccount = new wijmo.input.Popup('#frmCreateAccount'), frmEditAccount = new wijmo.input.Popup('#frmEditAccount');
    //
    // show forms
    document.querySelector('#btnLogin').addEventListener('click', () => {
        frmLogin.show(true, (sender) => {
            switch (sender.dialogResult) {
                case 'submit':
                    alert('form submitted');
                    break;
                case 'wj-hide-create':
                    document.getElementById('btnCreateAccount').click(); // open the Create Account form
                    break;
            }
        });
    });
    //
    document.querySelector('#btnCreateAccount').addEventListener('click', () => {
        frmCreateAccount.show(true, (sender) => {
            if (sender.dialogResult == 'submit') {
                alert('form submitted');
            }
        });
    });
    //
    document.querySelector('#btnEditAccount').addEventListener('click', () => {
        frmEditAccount.show(true, (sender) => {
            if (sender.dialogResult == 'submit') {
                alert('form submitted');
            }
        });
    });
    //
    // validate the form but don't submit
    document.body.addEventListener('submit', e => {
        e.preventDefault(); // don't submit
        //
        if (e.target.checkValidity()) {
            let dlg = wijmo.Control.getControl(e.target);
            dlg.hide('submit'); // close the dialog passing a dialogResult
        }
    });
    //
    // validate password/new password confirmation
    ensureSameValue('password', 'confirm'); // create account
    ensureSameValue('new-password', 'confirm-password'); // edit account
    //
    function ensureSameValue(f1, f2) {
        let inputs = [document.getElementById(f1), document.getElementById(f2)];
        //
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                let err = inputs[0].value != inputs[1].value ? 'Passwords don\'t match.' : '';
                inputs[1].setCustomValidity(err);
            });
        });
    }
}

This Pen is owned by Mescius Korea on CodePen.

See more by @MESCIUS-Korea on CodePen

External CSS

External JavaScript