top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
JavaScript自己编写的提示框 不喜欢js自带的alert函数可以学习下
编辑yang 发布时间2014-09-11 浏览量2890 来源本站编辑 特大
摘要:是不是现在有点讨厌系统自带的弹出提示框?alert('用这个函数太难看了'),现在就自己做一个好看一点的提示框吧。

       是不是现在有点讨厌系统自带的弹出提示框?alert('用这个函数太难看了')

       现在就自己做一个好看一点的提示框吧。代码如下:

CSS代码:

<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文件中,看看效果吧。

标签  技巧网页制作

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


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新