JavaScript实现弹框

浏览数：33 / 时间：2015年06月08日

提起JS弹框，我首先想到的是Alert，然后想到的还是Alert，最后我竟然就只知道Alert。然后面试就死在这个Alert上了。恼火。

根据网上各位大神的总结，我整理了一下，也顺便学习了一下。

一.仅确定，对话框上面只有一个确认按钮我们用Alert()

代码：

<title>Alert弹出确定框</title>
    <script type="text/javascript" language="javascript">
        alert("Hello Alex");
        alert("Bye!");
</script>

运行效果：

点击确定之后。

总结：

1.JavaScript中。每个Alert都会弹出一个对话框，不覆盖。

2.对话框是由浏览器产生的，JavaScript只是触发。不同的浏览器会显示不同的效果

二,确定和取消两个按钮,我们confirm()

代码：

<title>confirm弹出确认取消按钮</title>
    <script type="text/javascript" language="javascript">
        var isRes = confirm("Alex你在用confirm实现弹框吗？")
        if (isRes)
            alert("是的，我正在学习如何用confirm实现确认取消框。");
        else
            alert("没有阿，我没有用confirm实现弹框呢");
 </script>

运行效果：

当我点击确定之后:

当我点击取消之后：

总结：

无论我们点击确定还是取消，弹出框都会关闭，不同的是我们点击确定，confirm（）返回true，否则返回false。

三,界面显示文本框，用户可输入，用prompt()

代码：

<title>prompt弹出输入框</title>
    <script type="text/javascript" language="javascript">
        var name = prompt("请输入您的名字:", "");
        alert(name);
 </script>

运行效果：