您的位置：首页 > Web前端 > HTML

Html 弹出层 自定义提示信息

2016-09-08 16:15 435 查看
写一个弹出层显示提示信息，好处多多。。。。

1.属性:

display:none;//是一个Div层不显示
position:fixed;left:0px;top:0px;//将一个层固定在页面某个位置
border-radius: 6px;//圆角边框


2.代码:

<style>
input:focus {
border: 1px solid #2468a2;
}

.btn {
width: 100px;
height: 30px;
border-radius: 6px;
border-color: #787878;
background-color: #AAAAAA;
margin-top: 10px;
}
</style>
<script type="text/javascript">
//监听按钮状态
function radiusButtonListener(id) {
for (var i = 1; i <= 3; i++) {
document.getElementById("radiusBtn" + i).style.backgroundColor = "#AAAAAA";
document.getElementById("radiusBtn" + i).style.width = "100px";
}
document.getElementById("radiusBtn" + id).style.backgroundColor = "transparent";
document.getElementById("radiusBtn" + id).style.width = "120px";

}
function radiusButton(obj) {//按钮响应
show(obj);
}
//输出信息
function show(mes) {
document.getElementById("hid").style.display = "";//显示弹出层
document.getElementById("text").innerHTML = mes;//设置信息内容
setTimeout(function() {
document.getElementById("hid").style.display = "none";//关闭弹出层
}, 2000);
}
</script>
<body>
<br>
<br>
<br>
<br>
<div style="height: 150px; ">
<!-- 三个测试按钮 -->
<input id="radiusBtn1" type="button" class="btn" value="一个Button"
onclick="radiusButtonListener(1);radiusButton(this.value);"></br>
<input id="radiusBtn2" type="button" class="btn" value="一个弹出层"
onclick="radiusButtonListener(2);radiusButton(this.value);">
</br> <input id="radiusBtn3" type="button" class="btn" value="一行文字"
onclick="radiusButtonListener(3);radiusButton(this.value);">
</div>
<!-- 弹出层-->
<div id="hid" align="center"
style="position:fixed;left:10px;top:250px;border-radius: 6px;width:200px;height: 30px;background-color: #7A7A7A;display:none;line-height:30px;color:white;">
<!-- 弹出信息 -->
<span id="text" ></span>
</div>
</body>


3.图片：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML 经验
相关文章推荐
新的分享
章节导航