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="200px;">
  <input style="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; 200px;">
  <input style="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: 999;
    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: 0;
}
.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: 0;
    color: #000;
    font-weight: 600;
    font-size: 14px;
}
.tip1 > .wrap h3:first-child {
    padding-top: 5px;
}
.tip1 > .wrap h4 {
    color: #fff;
    font-style: italic;
}
</style>

将这些部分合到一个页面里面是可以完美运行起来的。

有空来记录一下确实不错。发上来之前就发现了一出逻辑错误。我用for循环来检测每一个radio。但是也把画弹出框的语句放到循环里了，最后造成的效果是画了好几次。以后这习惯得好好保持啊。

意见建议欢迎提出。