浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示地网页没有关系,也不包含HTML。它们的外观由操作系统及浏览器设置决定(本次用例都是显示谷歌浏览器下的对话框样式),而不是由css决定。此外,通过这几个方法打开的对话框都是同步和静态的,即显示这些对话框的时候,代码会停止执行,而关掉这些对话框后代码又会恢复执行。
alert()警示框
警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。这个方法接收一个字符串并将其显示给用户。通常使用这个方法生成的“警告”对话框项用户显示一些他们无法控制的消息,例如错误消息。而用户只能在看完消息后关闭对话框。
<input type="button" onclick="showalert()" vlaue="show-alert" /> <input type="button" onclick="showalert2()" vlaue="show-alert" /> <script type="text/javascript"> function showalert(){ alert("alert"); } function showalert2(){ alert("alert" + "\n" + "html"); } </script>
confirm()确认框
确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
<input type="button" onclick="show_confirm()" vlaue="show-confirm" /> <script type="text/javascript"> function show_confirm(){ var r = confirm("press a button"); if(r == true){ alert("OK"); }else{ alert("NO"); } } </script>
执行上面的代码,会出现一个确认框,包含一段显示的信息、一个确认按钮和一个取消按钮,如果用户点击了确定按钮,就会通过警示框向用户显示消息“OK”,如果用户单击了取消按钮,就会通过警示框向用户显示消息“NO”。
prompt()提示框
提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操做。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。prompt()方法接受两个参数:要显示给用户的文本提示和文本输入域的默认值(可以时一个空的字符串)。
<input type="button" onclick="show_prompt()" vlaue="show-prompt" /> <script type="text/javascript"> function show_prompt(){ var name = prompt("put your name","Lili"); { if(name != null && name !=""){ document.write("hello" + name); }else{ document.write("what is your name"); } } } </script>
print()和find()
除了上面的三个对话框外,还有两个可以通过JavaScript打开的对话框,即“查找”和“打印”,这两个对话框都是异步显示的,能够将控制权立即交还给脚步。这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令打开的对话框相同。
<input type="button" onclick="show_print()" vlaue="show-print"/> <input type="button" onclick="show_find()" vlaue="show-find"/> <script type="text/javascript"> function show_print(){ window.print(); } function show_find(){ window.find(); } </script>