js弹出提示窗口（漂亮的弹出框，javascript库bootbox介绍）
传统的javascript的警告框 、确认框 、提示框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> </head> <body> <button onclick="f1()">警告框</button> <button onclick="f2()">确认框</button> <button onclick="f3()">提示框</button> <script> function f1() { alert(欢迎来到蚂蚁学Python！) } function f2() { var r = confirm("请按下列的按钮："); if (r === true) { alert(这是点击确认后执行的警告框); } else { alert(这是点击取消后执行的警告框); } } function f3() { var r = prompt("谁的Python课程最好？", "蚂蚁老师"); if (r != null) { alert(r + 的Python课程最好了！); } } </script> </body> </html>以上原生的弹出框 ，样式和功能受制于浏览器 ，不利于炫酷狂拽的开发 。
bootbox
官方网站：http://bootboxjs.com/
留意 ，官网的cdnjs链接可能失效 。
依赖：这个库依赖于bootstrap 、jquery ，须按顺序导入文件中 ，基本框架如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootbox弹出框</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!--在head里导入bootstrap的css--> </head> <body> <!--写元素的地方--> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script> <!--在body的下端导入jquery--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <!--在body的下端导入bootstrap的js ，要注意须含有popper.js--> <script src="https://cdn.jsdelivr.net/npm/bootbox@6.0.0/dist/bootbox.all.min.js"></script> <!--最后引入bootbox--> <!--写js代码的地方--> </body> </html>这个库可以根据官方文档 ，设置弹出框的大小 、位置 、语言等 ，我用以下2个按钮及其代码演示：
在写元素的地方插入bootstrap风格的按钮：
<button class="btn btn-dark" id="btn1">警告框</button> <button class="btn btn-dark" id="btn2">确认框</button>在写js代码的地方插入jquery风格的语句：
<script> $("#btn1").click(function () { bootbox.alert({ <!--默认的位置 、大小 、语言--> title: 警告框的标题, message: 警告框的内容 }) }) $("#btn2").click(function () { bootbox.confirm({ <!--垂直居中 、大框 、按钮简体中文 、不显示右上角的关闭X（如有 ，传给回调函数的是false）--> centerVertical: true, size: large, locale: zh-CN, closeButton: false, title: 确认框的标题, message: 确认框的内容, callback: function (result) { alert("传给回调函数的是：" + result) } }) }) </script>你会得到以下2个弹出框：
另外很有用的是 ，bootbox.prompt ，提示框内 ，除了原生的一个文本框外 ，还可以改为数字 、密码 、邮箱 、单选 、复选 、下拉框等 ，这里就不展开了 。
自定义弹出框
最后分享一下自定义按钮的弹出框 。
在写元素的地方插入bootstrap风格的按钮：
<button class="btn btn-dark" id="btn3">自定义框</button>在写js代码的地方插入jquery风格的语句：
<script> $("#btn3").click(function() { bootbox.dialog({ title: 自定义框的标题, message: "<h3>这个位置都可以是html语言</h3><p>红色按钮的return false使得弹出框屹立不倒</p>", buttons: { red: { label: "红色按钮", className: btn-danger, callback: function() { alert(你点击了红色按钮) return false } }, blue: { label: "蓝色按钮", className: btn-primary, callback: function() { alert(你点击了蓝色按钮) } }, green: { label: "绿色按钮", className: btn-success, callback: function() { alert(你点击了绿色按钮) } } } }) }) </script>于是有了：
标题 、内容 、每个按钮的标签 、样式 、回调函数都可以自定义 ，这样弹窗不就灵活多端了！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！