JavaScript自己编写的提示框不喜欢js自带的alert函数可以学习下 - PHP日常开发笔记

<style>
.tishikuang{position:fixed; z-index:1000; min-width:300px; height:50px; background:#00F; color:#FFF; line-height:50px; text-align:center; top:50%; left:50%; margin-left:-150px; margin-top:-25px; padding:5px; border-radius:5px; background:#606462; border:2px solid #606462; font-family:"微软雅黑","黑体"; transition:border-color linear 0.2s;}
.tishikuang .close{position:absolute;right:-12px; margin-top:-18px; cursor:pointer; display:none; width:25px; height:25px; border-radius:17px; line-height:22px; vertical-align:middle; background:inherit; vertical-align:middle; color:#FFF;border:2px solid #606462; text-align:center; font-size:25px; transition:color linear 0.2s;}
.tishikuang .close:hover{ color:#F00;}
.tishikuang:hover{ border-color:#FFF;}
.tishikuang:hover .close{display:inline-block;border-color:#fff;}
.displaynone{display:none;}
</style>

JS代码：

<script>
window.onload=function(){
    document.body.innerHTML+='<div id="tishikuang"></div>';//或者直接在body加<div id="tishikuang"></div> 就可以把这个加载函数删除掉啦
}
//自动关闭的提示函数
function Ts_auto(msg){
    document.getElementById("tishikuang").className="tishikuang";
    document.getElementById("tishikuang").innerHTML=msg;
    setTimeout(function(){
    document.getElementById("tishikuang").className="displaynone";},2000)
}
//带有关闭按钮的提示函数
function Ts_auto_no(msg){
    document.getElementById("tishikuang").innerHTML=msg+'<div class="close" onclick="Tsclose()">×</div>';
    document.getElementById("tishikuang").className="tishikuang";
}
function Tsclose(){
    document.getElementById("tishikuang").className="displaynone";
}
</script>

HTML代码：

<body style="background:#303;">
<button onclick="Ts_auto('你还有234项没有填写完。你认真填写哦。。。是吧')">点这里试下</button>
</body>

好了，把这些代码复制到html文件中，看看效果吧。

标签技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)

上一篇会员注册利用Ajax异步实时判断会员名是否可以注册

下一篇JavaScript获得日期的函数

友情链接

申请友情链接[Alt+L]

CMS演示百度优酷魅族新浪科技 126邮箱 2345网址导航贵州交通职业技术学院快递查询贵阳人力资源网上办事

申请友情链接(Link)

关闭[ESC/Alt+L]

网站名字：
网站地址：
验证码：
1、您的网站须被百度收录.马上检测是否被百度收录。 2、请在贵站首页把本站的链接加上，谢谢. 获取友情链接代码 3、提出申请成功后，您的链接将在1小时内显示.
申请友情链接 [Enter]

反馈/咨询/建议/留言(GuestBook)

关闭[ESC/Alt+G]

您好，怎么称呼您！


您的姓名：
	上一步：鼠标向上滚动/左方向键(←) 下一步或完成：鼠标向下滚动/Tab键/右方向键(→)

如果您有空的话，可以填一下您的相关信息！

您的电话：
您的邮箱：

现在，请填写您想要了解的信息！

信息内容：
验证码：

下一步