本文主要是介绍js中弹框有那些，提示框、请求成功弹窗、请求失败弹框等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我这里写的是个人推荐仅供参考：
效果图：
代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.6.3.js"></script><style>*{margin: 0;padding: 0;}.hinte {width: 320px;height: 50px;text-align: center;line-height: 50px;background-color:#F0F9EB ;color:#6BC440;border-radius: 5px;position: fixed;top: 20px;left: calc(50% - 160px);z-index: 999;display: none;}/* 失败 */.hintes {width: 320px;height: 50px;text-align: center;line-height: 50px;background-color:#FEF0F0;color: red; border-radius: 5px;position: fixed;top: 20px;left: calc(50% - 160px);z-index: 999;display: none;}/* 提示 */.hinted {width: 320px;height: 50px;text-align: center;line-height: 50px;background-color: #FDF6EC;color: #ffe042;border-radius: 5px;position: fixed;top: 20px;left: calc(50% - 160px);z-index: 999;display: none;}</style></head><body><div class="box"><button onclick="detrusion()">成功弹框</button><button onclick="detrusions()">失败弹框</button><button onclick="detrusionss()">提示弹框</button><!-- 成功弹框 --><div class="hinte">成功弹框</div><!-- 失败弹框 --><div class="hintes">失败弹框</div><!-- 提示弹框 --><div class="hinted">提示弹框</div><script>function detrusion() {$(".hinte").slideToggle().text('成功弹框').fadeIn();setTimeout(() => {$(".hinte").slideToggle();}, 2000)}function detrusions() {$(".hintes").slideToggle().text('失败弹框').fadeIn();setTimeout(() => {$(".hintes").slideToggle();}, 2000)}function detrusionss() {$(".hinted").slideToggle().text('提示弹框').fadeIn();setTimeout(() => {$(".hinted").slideToggle();}, 2000)}</script></div></body>
</html>以上内容仅供大家参考,希望可以帮到大家；
这篇关于js中弹框有那些，提示框、请求成功弹窗、请求失败弹框等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
