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。但是也把画弹出框的语句放到循环里了，最后造成的效果是画了好几次。以后这习惯得好好保持啊。

意见建议欢迎提出。