JavaScript总结之鼠标划过弹出div单击出现对话框
浏览数：142 /
时间：2015年06月08日
为了满足他们的永无止境的要求，我可谓是任劳任怨啊，累断了双手，看瞎了双眼。这个是来写鼠标划过一个按钮，然后弹出一个小提示框解释，另外根据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。但是也把画弹出框的语句放到循环里了，最后造成的效果是画了好几次。以后这习惯得好好保持啊。
意见建议欢迎提出。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
