正文
JavaScript总结之鼠标划过弹出div单击出现对话框
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
为了满足他们的永无止境的要求，我可谓是任劳任怨啊，累断了双手，看瞎了双眼。这个是来写鼠标划过一个按钮，然后弹出一个小提示框解释，另外根据radio是否选中，判断点击后如何执行，然后执行之后再有一个确认或取消。其实部分想要的功能可以从中截取。
js代码：
<script type="text/javascript">
function sAlert_jobdel(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=150;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#D3CFD0";//提示窗口的边框颜色
titlecolor="#D3CFD0";//提示窗口的标题颜色 var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height; var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000"; var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="5px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001"; var btn1 = document.createElement("input");
btn1.setAttribute("id","btnMks");
btn1.setAttribute("value","确定");
btn1.setAttribute("type","button");
btn1.setAttribute("width","150px");
btn1.setAttribute("height","20px");
btn1.style.paddingTop="3px";
btn1.style.paddingBottom="3px";
btn1.style.paddingLeft="8px";
btn1.style.paddingRight="8px";
btn1.style.marginTop="40px";
btn1.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
btn1.style.opacity="0.75";
btn1.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
btn1.style.cursor="pointer";
btn1.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
} var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
var bool=false;
for(i=0;i<document.getElementsByName("job_item").length;i++){
if(document.getElementsByName("job_item").item(i).checked){
bool=true;
}}
if(bool==false){
document.body.appendChild(bgObj);
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.style.color="#000"
txt.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
document.getElementById("msgDiv").appendChild(btn1);
}else{
if(window.confirm('删除是不可恢复的，你确定要删除吗？')){
/*alert("确定");*/
return true;
}else{
/* alert("取消");*/
return false;
} }
} </script>
这段js代码实现了弹出提示框，还有再次确认框。
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#popup_submit1").mouseover(function(){
$('#overflow1').delay(400).show('fast');
})
$("#popup_submit1").mouseout(function(){
$('#overflow1').hide('fast');
})
$("#popup_submit2").mouseover(function(){
$('#overflow2').delay(400).show('fast');
})
$("#popup_submit2").mouseout(function(){
$('#overflow2').hide('fast');
})
})
</script>
这段代码是鼠标划过显示下拉框。需要注意下的就是这里有一个延时。是为了避免鼠标无意划过多次，弹出多次。
HTML代码：
<form>
<input type="radio" name="job_item" />
作业1<br />
<input type="radio" name="job_item" />
作业2<br />
<input type="radio" name="job_item" />
作业3<br />
<input type="radio" name="job_item" />
作业4<br />
<br />
<br />
<br />
<br />
<span style="width:200px;">
<input style="width:100px;" id="popup_submit1" type="button" value="删除" onclick="sAlert_jobdel('请在作业列表中选择一个作业');">
<div class="tip1" id="overflow1">
<div class="arrow"></div>
<div class="wrap">
<div class="content">
<p>选中一个作业后删除</p>
</div>
</div>
</div>
</span> <span style="margin-left:20px; width:200px;">
<input style="width:100px;" id="popup_submit2" type="reset" value="重置" >
<div class="tip1" id="overflow2">
<div class="arrow"></div>
<div class="wrap">
<div class="content">
<p>取消radio的选中状态</p>
</div>
</div>
</div>
</span>
</form>
将按钮放在一个form里，可以形成一个像组一样的东西，这样input一个type为reset的重置就可以将选中的radio去掉。
CSS代码：
<style type="text/css">
.tip1 {
position: absolute;
z-index:;
display: none;
margin-top: 30px;
}
.tip1 > div.arrow {
background: url(../assets/inline_help_arrow.png);
position: absolute;
width: 30px;
height: 18px;
background-repeat: no-repeat;
right: 80px;
top:;
}
.tip1 > .wrap {
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;
box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;
-moz-border-radius: 3px;
/* Gecko */
-webkit-border-radius: 3px;
/* Webkit */
-khtml-border-radius: 3px;
/* Konqueror */
border-radius: 3px;
/* CSS3 */
border: 1px solid #bbb;
border-bottom-color: #aaa;
border-right-color: #aaa;
background: #fff;
background-image: -moz-linear-gradient(#f8f8f8, #ededef);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8f8f8), color-stop(1, #ededef));
background-image: -webkit-linear-gradient(#f8f8f8, #ededef);
background-image: -o-linear-gradient(#f8f8f8, #ededef);
background-image: -ms-linear-gradient(top, #f8f8f8, #ededef);
background-image: linear-gradient(top, #f8f8f8, #ededef);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#ededef');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#ededef')";
padding: 5px 5px;
width: 150px;
color: #333;
font-weight: normal;
opacity: 0.7;
filter: alpha(opacity=70);/* IE 透明度70%*/
-moz-opacity: .7;/* Moz + FF 透明度70%*/
}
.tip1 > .wrap > .content {
margin-top: 5px;
padding: 0 10px 0 10px;
background: #fff;
border: 1px solid #cfcfcf;
max-height: 400px;
overflow-y: auto;
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.tip1 > .wrap .content p {
color: #000;
}
.tip1 > .wrap h3 {
text-align: center;
padding-top: 10px;
padding-left: 5px;
margin:;
color: #000;
font-weight:;
font-size: 14px;
}
.tip1 > .wrap h3:first-child {
padding-top: 5px;
}
.tip1 > .wrap h4 {
color: #fff;
font-style: italic;
}
</style>
将这些部分合到一个页面里面是可以完美运行起来的。
有空来记录一下确实不错。发上来之前就发现了一出逻辑错误。我用for循环来检测每一个radio。但是也把画弹出框的语句放到循环里了，最后造成的效果是画了好几次。以后这习惯得好好保持啊。
意见建议欢迎提出。
