alert效果类似的js代码

最新推荐文章于 2025-06-19 19:48:29 发布

原创最新推荐文章于 2025-06-19 19:48:29 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

JAVASCRIPT 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用自定义弹窗替代浏览器默认alert的方法，通过CSS和JavaScript实现了跨浏览器一致且美观的提示框效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目要求显示提示信息时不能有来自网址“。。。。”的显示，之前都是用的alert做的提示，所以不同的浏览器显示的提示是不一样的，尤其是我们这个项目，在手机端显示时总是带有网站的域名显示：比如修改之前的提示信息是（来自www.weixin.com的显示：请输入正确的QQ号），修改后的就自己看图吧，还是先上代码吧：

①：css：

*{ padding:0; margin:0;}

#bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=60);font-size:12px; width:100%; height:100%;position:absolute; top:0; left:0}

#info{height:0px; width:0px;top:50%; left:50%;position:absolute;font-size:12px; line-height:1.7}

#center{background:#fff;border:1px solid #217AC1;font-size:12px; width:300px; height:100px; position:absolute; margin:-50px -150px;}

#center strong{ display:block;font-size:12px; padding:2px 5px; background:#EBF4FC; color:#519FEE;}

#center p{padding:10px;font-size:12px; text-align:center; color:#1C6FB8;}

#center .closeBtn {font-size:12px;width:8px;height:7px;overflow:hidden;float:right;cursor:pointer;background:url(<s:url value="/images/gnbimgs.gif"/>) no-repeat;display:inline;margin:10px 10px 0 0;}

#center .closeBtn:hover{background:url(<s:url value="/images/gnbimgs.gif"/>) no-repeat -8px 0;}

.button {font-size:12px;width:55px;height:22px;text-align:center;line-height:22px;color:#fff;background:url(<s:url value="/images/but.jpg"/>) no-repeat;border:none;display:inline;margin:0 8px;cursor:pointer;}

②：核心代码

function boxs(v,htmStr){

window.scrollTo(0,0);

var bo = document.getElementsByTagName('body')[0];

var ht = document.getElementsByTagName('html')[0];

var boht = document.getElementById('boxs');

boht.innerHTML = '';

bo.style.height='auto';

bo.style.overflow='auto';

ht.style.height='auto';

if(v == 1){

bo.style.height='100%';

bo.style.overflow='hidden';

ht.style.height='100%';

boht.innerHTML = htmStr;

}

</script>

③：弹出层代码，js方法中使用的代码

if(qq == ''){

var str = '<div id="bg"></div><div id="info"><div id="center"><span class="closeBtn" onclick="javascript:boxs(0);qqFocus();"></span><strong>信息提示：</strong><p>'+'请输入QQ号！</a></p><p style="padding:5px 0;"><button class="button" onclick="javascript:boxs(0);qqFocus();">确定</button></p></div></div>';

boxs(1,str);

return false;

}

这里的弹出层添加了点击关闭弹出层后，光标聚焦input的事件（qqFocus()），使用的时候需要就加上，不需要去掉就可以了

说明下使用方法：

boxs(v,html) //解释下，参数v，用来控制调用方法boxs时是显示弹出层还是关闭弹出层，1表示显示，0表示关闭;html就是要显示的弹出层的html代码可以参考上面的弹出层代码

首先将css代码引入到jsp页面中，然后页面的body中的任意位置加入②：核心代码,然后在js中使用③：弹出层代码，特别注意不要忘了引入两张小图片

最后上个截图