JavaScriptのまとめマウスをクリックしてdivをポップアップします.
37976 ワード
彼らの果てしない要求を満たすために、私は苦労をいとわず、両手を折って、目を閉じました.これはマウスを書いてボタンを押した後、小さなヒントボックスをクリックして説明します.またラジオが選択されているかどうかを判断して、クリックしたらどうやって実行しますか?実は欲しい機能は中から切り取ります.
jsコード:
HTMLコード:
CSSコード:
時間があったら記録してもいいです.送る前に論理エラーを発見しました.私はforループで各ラジディオを測定します.でも、フレームを描く語句をループに入れて、最後に何度も描いた効果があります.これからは慣れをよく維持してください.
ご意見を歓迎します.
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> 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>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ループで各ラジディオを測定します.でも、フレームを描く語句をループに入れて、最後に何度も描いた効果があります.これからは慣れをよく維持してください.
ご意見を歓迎します.