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-linear-gradient(top, #f8f8f8, #ededef);
39     background-image: linear-gradient(top, #f8f8f8, #ededef);
40      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#f8f8f8‘, endColorstr=‘#ededef‘);
41     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#f8f8f8‘, endColorstr=‘#ededef‘)";
42     padding: 5px 5px;
43     width: 150px;
44     color: #333;
45     font-weight: normal;
46     opacity: 0.7;
47     filter: alpha(opacity=70);/* IE 透明度70%*/
48     -moz-opacity: .7;/* Moz + FF 透明度70%*/
49 }
50 .tip1 > .wrap > .content {
51     margin-top: 5px;
52     padding: 0 10px 0 10px;
53     background: #fff;
54     border: 1px solid #cfcfcf;
55     max-height: 400px;
56     overflow-y: auto;
57     -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
58     -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
59     -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
60     box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
61 }
62 .tip1 > .wrap .content p {
63     color: #000;
64 }
65 .tip1 > .wrap h3 {
66     text-align: center;
67     padding-top: 10px;
68     padding-left: 5px;
69     margin: 0;
70     color: #000;
71     font-weight: 600;
72     font-size: 14px;
73 }
74 .tip1 > .wrap h3:first-child {
75     padding-top: 5px;
76 }
77 .tip1 > .wrap h4 {
78     color: #fff;
79     font-style: italic;
80 }
81 </style>

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

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

意见建议欢迎提出。

JavaScript总结之鼠标划过弹出div单击出现对话框,布布扣,bubuko.com