时间：2021-07-01 10:21:17 帮助过：26人阅读
这里我给大家介绍js自定义弹窗的三种方式效果。希望本篇文章介绍可以让感兴趣的朋友对js自定义弹出窗的代码原理有所帮助！
第一种js弹窗代码具体示例如下：
<!DOCTYPE html>
<html>
<head>
<title>js自定义弹出框代码测试一</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f1(){
alert("这是第一种弹窗提示1 alert,单击确定后才能进行下一步的操作,只是提醒,不能对脚本产生任何改变");
}
</script>
</head>
<body>
<button onclick="f1();">弹窗提示1</button>
</body>
</html>效果如下图：
注：JavaScript alert()函数
alert--弹出消息对话框（对话框中有一个OK按钮）
alert，中文"提醒"的意思
第二种js弹窗代码具体示例如下：
<!DOCTYPE html>
<html>
<head>
<title>js自定义弹出框代码测试</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f2(){
var flag = confirm("这是第二种弹窗提示2 confirm单击确定返回true,单击取消返回false");
if(flag){
alert("你点击的是确定");
}else{
alert("你单击的是取消");
}
}
</script>
</head>
<body>
<button onclick="f2();">弹窗提示2</button>
</body>
</html>效果如下图：
注：confirm()函数中的参数是确认框的提示语。此函数返回值是布尔型的，点击确定，返回值为true，点击取消返回值为false。
第三种js弹窗代码具体示例如下：
<!DOCTYPE html>
<html>
<head>
<title>js自定义弹出框代码测试</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f3(){
var name = prompt("请输入你的名字:","");
console.log(name);
console.log(typeof(name));
if("Gxl网" === name){
alert("欢迎您:"+name);
}else{
alert("输入有误!");
}
}
</script>
</head>
<body>
<button onclick="f3();">弹窗提示3</button>
</body>
</html>效果如下图：
注：第三种js弹窗代码需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值。若点击取消按钮,则返回值为null,类型为object。若点击确认按钮,则返回值为输入的字符串(不输入时为空字符串),类型为string.
【相关文章推荐】
js弹窗基础讲解
JavaScript实现右下角弹出提示框的方法
如何用JS和CSS3制作炫酷的弹窗效果
jQuery实现简单的弹出窗口实例
以上就是页面中js弹窗怎么实现？（多种样式示例）的详细内容，更多请关注Gxl网其它相关文章！