JavaScript Sweet Alert Sample


<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
const a = document.getElementById('a')
const d = document.getElementById('d')
const s = document.getElementById('s')
const w = document.getElementById('w')
const e = document.getElementById('e')
const p = document.getElementById('p')

a.addEventListener('click', () => alert('Hello world!'))
d.addEventListener('click', () => swal('Hello world!'))

s.addEventListener('click', () => {
  swal({
    title: '成功',
    text: 'サンプルのテキストです。',
    icon: 'success',
  })
})

w.addEventListener('click', () => {
  swal({
    title: '警告',
    text: 'サンプルのテキストです。',
    icon: 'warning',
  })
})

e.addEventListener('click', () => {
  swal({
    title: 'エラー',
    text: 'サンプルのテキストです。',
    icon: 'error',
  })
})

p.addEventListener('click', () => {
  const value = swal('何か入力してください:', {
    content: 'input'
  }).then(value => {
    swal(`あなたの入力内容は: ${value}`)
  })
})

元記事を表示する