首页 > 代码库 > JavaScript总结之鼠标划过弹出div单击出现对话框
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="http://www.mamicode.com/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。但是也把画弹出框的语句放到循环里了，最后造成的效果是画了好几次。以后这习惯得好好保持啊。
意见建议欢迎提出。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。