javaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求，我可谓是任劳任怨啊，累断了双手，看瞎了双眼。这个是来写鼠标划过一个按钮，然后弹出一个小提示框解释，另外根据radio是否选中，判断点击后如何执行，然后执行之后再有一个确认或取消。其实部分想要的功能可以从中截取。

js代码：

  1 <script type="text/Javascript">  2 function sAlert_jobdel(str){  3    var msgw,msgh,bordercolor;  4    msgw=400;//提示窗口的宽度  5    msgh=150;//提示窗口的高度  6    titleheight=25 //提示窗口标题高度  7    bordercolor="#D3CFD0";//提示窗口的边框颜色  8    titlecolor="#D3CFD0";//提示窗口的标题颜色  9     10    var sWidth,sHeight; 11    sWidth=document.body.offsetWidth; 12    sHeight=screen.height; 13  14    var bgObj=document.createElement("div"); 15    bgObj.setAttribute('id','bgDiv'); 16    bgObj.style.position="absolute"; 17    bgObj.style.top="0"; 18    bgObj.style.background="#777"; 19    bgObj.style.filter="PRogid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 20    bgObj.style.opacity="0.6"; 21    bgObj.style.left="0"; 22    bgObj.style.width=sWidth + "px"; 23    bgObj.style.height=sHeight + "px"; 24    bgObj.style.zIndex = "10000"; 25     26     27    var msgObj=document.createElement("div") 28    msgObj.setAttribute("id","msgDiv"); 29    msgObj.setAttribute("align","center"); 30    msgObj.style.background="white"; 31    msgObj.style.border="5px solid " + bordercolor; 32    msgObj.style.position = "absolute"; 33    msgObj.style.left = "50%"; 34    msgObj.style.top = "50%"; 35    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 36    msgObj.style.marginLeft = "-225px" ; 37    msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 38    msgObj.style.width = msgw + "px"; 39    msgObj.style.height =msgh + "px"; 40    msgObj.style.textAlign = "center"; 41    msgObj.style.lineHeight ="25px"; 42    msgObj.style.zIndex = "10001"; 43              44     var btn1 = document.createElement("input"); 45     btn1.setAttribute("id","btnMks"); 46     btn1.setAttribute("value","确定"); 47     btn1.setAttribute("type","button"); 48     btn1.setAttribute("width","150px"); 49     btn1.setAttribute("height","20px"); 50     btn1.style.paddingTop="3px"; 51     btn1.style.paddingBottom="3px"; 52     btn1.style.paddingLeft="8px"; 53     btn1.style.paddingRight="8px"; 54     btn1.style.marginTop="40px"; 55     btn1.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100,             finishY=100,style=1,opacity=75,finishOpacity=100);"; 56      btn1.style.opacity="0.75"; 57      btn1.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 58      btn1.style.cursor="pointer"; 59      btn1.onclick=function(){ 60           document.body.removeChild(bgObj); 61           document.getElementById("msgDiv").removeChild(title); 62           document.body.removeChild(msgObj); 63           } 64  65      var title=document.createElement("h4"); 66      title.setAttribute("id","msgTitle"); 67      title.setAttribute("align","right"); 68      title.style.margin="0"; 69      title.style.padding="3px"; 70      title.style.background=bordercolor; 71      title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 72      title.style.opacity="0.75"; 73      title.style.border="1px solid " + bordercolor; 74      title.style.height="18px"; 75      title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 76      title.style.color="white"; 77      title.style.cursor="pointer"; 78      title.innerHTML="关闭"; 79      title.onclick=function(){ 80           document.body.removeChild(bgObj); 81           document.getElementById("msgDiv").removeChild(title); 82           document.body.removeChild(msgObj); 83           } 84     var bool=false; 85     for(i=0;i<document.getElementsByName("job_item").length;i++){ 86     if(document.getElementsByName("job_item").item(i).checked){ 87             bool=true; 88        }} 89     if(bool==false){ 90     document.body.appendChild(bgObj); 91     document.body.appendChild(msgObj); 92     document.getElementById("msgDiv").appendChild(title); 93      var txt=document.createElement("p"); 94      txt.style.margin="1em 0" 95      txt.setAttribute("id","msgTxt"); 96      txt.style.color="#000" 97      txt.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif" 98      txt.innerHTML=str; 99      document.getElementById("msgDiv").appendChild(txt);100      document.getElementById("msgDiv").appendChild(btn1);101     }else{102         if(window.confirm('删除是不可恢复的，你确定要删除吗？')){103               /*alert("确定");*/104               return true;105            }else{106               /* alert("取消");*/107               return false;108            }109     110     }111 }112 113 </script>

这段js代码实现了弹出提示框，还有再次确认框。

 1 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>  2 <script type="text/javascript"> 3       $(function(){ 4             $("#popup_submit1").mouSEOver(function(){ 5             $('#overflow1').delay(400).show('fast'); 6             }) 7             $("#popup_submit1").mouseout(function(){ 8             $('#overflow1').hide('fast'); 9             })10             $("#popup_submit2").mouseover(function(){11             $('#overflow2').delay(400).show('fast');12             })13             $("#popup_submit2").mouseout(function(){14             $('#overflow2').hide('fast');15             })16         })17 </script>

这段代码是鼠标划过显示下拉框。需要注意下的就是这里有一个延时。是为了避免鼠标无意划过多次，弹出多次。

HTML代码：

 1 <form> 2   <input type="radio" name="job_item" /> 3   作业1<br /> 4   <input type="radio" name="job_item"  /> 5   作业2<br /> 6   <input type="radio" name="job_item"  /> 7   作业3<br /> 8   <input type="radio" name="job_item"  /> 9   作业4<br />10   <br />11   <br />12   <br />13   <br />14   <span style="width:200px;">15   <input style="width:100px;" id="popup_submit1"  type="button" value="删除"  onclick="sAlert_jobdel('请在作业列表中选择一个作业');">16   <div  class="tip1" id="overflow1">17     <div class="arrow"></div>18     <div class="wrap">19       <div class="content">20         <p>选中一个作业后删除</p>21       </div>22     </div>23   </div>24   </span> <span style="margin-left:20px; width:200px;">25   <input style="width:100px;" id="popup_submit2" type="reset" value="重置" >26   <div  class="tip1" id="overflow2">27     <div class="arrow"></div>28     <div class="wrap">29       <div class="content">30         <p>取消radio的选中状态</p>31       </div>32     </div>33   </div>34   </span>35 </form>

将按钮放在一个form里，可以形成一个像组一样的东西，这样input一个type为reset的重置就可以将选中的radio去掉。

CSS代码：

 1 <style type="text/css"> 2 .tip1 { 3     position: absolute; 4     z-index: 999; 5     display: none; 6     margin-top: 30px; 7 } 8 .tip1 > div.arrow { 9     background: url(../assets/inline_help_arrow.png);10     position: absolute;11     width: 30px;12     height: 18px;13     background-repeat: no-repeat;14     right: 80px;15     top: 0;16 }17 .tip1 > .wrap {18     -moz-box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;19     -o-box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;20     -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;21     box-shadow: 2px 2px 10px rgba(0, 0, 10, 0.3), inset 0 1px 2px white;22     -moz-border-radius: 3px;23     /* Gecko */24     -webkit-border-radius: 3px;25     /* Webkit */26     -khtml-border-radius: 3px;27     /* Konqueror */28     border-radius: 3px;29     /* CSS3 */30     border: 1px solid #bbb;31     border-bottom-color: #aaa;32     border-right-color: #aaa;33     background: #fff;34     background-image: -moz-linear-gradient(#f8f8f8, #ededef);35     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8f8f8), color-stop(1, #ededef));36     background-image: -webkit-linear-gradient(#f8f8f8, #ededef);37     background-image: -o-linear-gradient(#f8f8f8, #ededef);38     background-image: -ms-li