html里面那些原生对话框

列举一下html里面那些原生对话框.

Window: confirm()

react在线例子:

实时编辑器

function Clock() {
  function openConfirm() {
    const message = 'Are you sure you want to do this?'
    const result = window.confirm(message)
    console.log(result)
  }
  return (
    <div>
      <button onClick={openConfirm}>Show Confirm</button>
    </div>
  )
}

结果

Loading...

confirm会让你传入要在确认对话框中显示的字符串。当你点击确定时会返回true，点击取消会返回false。

Window: alert()

react在线例子:

实时编辑器

function Clock() {
  function openAlert() {
    window.alert('Hello world!')
    alert('Hello world! again')
  }
  return (
    <div>
      <button onClick={openAlert}>Show Alert</button>
    </div>
  )
}

结果

Loading...

alert的参数为对话框中显示的字符串,只有一个确定按钮,没有返回值.

Window: prompt()

react在线例子:

实时编辑器

function Clock() {
  function openPrompt() {
    const result = window.prompt('Are you feeling lucky', 'sure')
    console.log(result)
  }
  return (
    <div>
      <button onClick={openPrompt}>Show Prompt</button>
    </div>
  )
}

结果

Loading...

prompt有两个参数,第一个要向用户显示的文本字符串,第二个参数是一个字符串，包含文本输入字段中显示的默认值。

它有确定和取消两个按钮,当用户单击“确定”按钮时，将返回在输入字段中输入的文本。如果用户单击“确定”而不输入任何文本，则返回空字符串。如果用户单击“取消”按钮，此函数将返回 null 。

信息

• 上面三个都可以通过window.xxx,或者直接xx()直接调用,拿alert来举例子:

window.alert('Hello world!')
alert('Hello world! again')

这两种调用方式是等效的.

• 它们都会阻止程序的继续执行,直到用户点击确定或者取消.