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

js实现提示框，小例子

2016-04-11 11:01 691 查看

<style>
#dianji {
width: 150px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid #eee;
background-color: red;
display: none;
}
</style>
<body>

<input type="checkbox" id="box">
<label for="box">记住密码</label>
<div id="dianji">选择后，密码保存两周</div>
</body>
<script src=script/jquery-1.11.3.js></script>
<script>
//原生js实现
/*window.onload=function(){
var boxobj=document.getElementById('box');
var dianjiobj=document.getElementById('dianji');
boxobj.addEventListener("click",function(){
dianjiobj.style.display="block";
},false)
boxobj.addEventListener("mouseout",function(){
dianjiobj.style.display="none";
},false)

}*/
//jquery实现
$(function(){

$("#box").bind("click",function(){
$("#dianji").css("display","block");
//$("#dianji").show();与上面代码意思一样
});
$("#box").bind("mouseout",function(){
$("#dianji").css("display","none");
//$("#dianji").hide();
})
})
</script>
</html>

效果图：

选中后，会弹出一个提示框：

移除鼠标后，提示框取消。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 提示框

相关文章推荐

新的分享

章节导航