一:
这是只是一个很简单的例子
Js代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
createDialog: function(flag){ var dialogMark = document.getElementById("dialogMark"); var dialogContent = document.getElementById("dialogContent"); var dialogIframe = document.getElementById("dialogIframe"); if(typeof(dialogContent)=="unfined"||dialogContent==null){ dialogContent = document.createElement("div"); dialogContent.id="dialogContent"; dialogContent.innerHTML="This is a message of dialog."; dialogContent.style.backgroundColor="#FF0000"; dialogContent.style.width="100%"; dialogContent.style.height="100%"; dialogContent.style.border="1px solid #00FFFF"; } if(typeof(dialogMark)=="unfined"||dialogMark==null){ dialogMark = document.createElement("div"); dialogMark.id="dialogMark"; dialogMark.innerHTML="[<a href='#' onclick=\"commonUtils.createDialog('N')\">X</a>]"; dialogMark.style.backgroundColor="#FF00FF"; dialogMark.style.top="100px"; dialogMark.style.left="100px"; dialogMark.style.width="600px"; dialogMark.style.height="300px"; dialogMark.style.position="absolute"; dialogMark.style.filter="alpha(opacity=80)"; dialogMark.style.border="2px solid #00FF00"; dialogMark.appendChild(dialogContent); document.body.appendChild(dialogMark); } if(typeof(dialogIframe)=="unfined"||dialogIframe==null){ dialogIframe = document.createElement("iframe"); dialogIframe.id="dialogIframe"; dialogIframe.style.backgroundColor="#660066"; dialogIframe.style.top="0px"; dialogIframe.style.left="0px"; dialogIframe.style.width=window.screen.availWidth+"px"; dialogIframe.style.height=window.screen.availHeight+"px"; dialogIframe.style.filter="alpha(opacity=20)"; dialogIframe.style.position="absolute"; //dialogIframe.appendChild(dialogMark); document.body.appendChild(dialogIframe); } if(flag=="Y"){ dialogIframe.style.zIndex=10000; dialogMark.style.zIndex=10001; dialogContent.style.zIndex=10002; dialogIframe.style.display=""; dialogMark.style.display=""; dialogContent.style.display=""; }else{ dialogIframe.style.zIndex=-1; dialogMark.style.zIndex=-2; dialogContent.style.zIndex=-3; dialogIframe.style.display="none"; dialogMark.style.display="none"; dialogContent.style.display="none"; } } |
为了让对话框的内容更丰富，可以直接在html写代码，然后方法里面不要创建dialogContent这个元素就可以。
二:
Html代码
|
1 2 3 4 |
<div id="dialogMark" class="dialogMark"> [<a href="#">X</a>] <div id="dialogContent" class="dialogContent" onmouseout="commonUtils.showNoteDialog('N')">This is a message of dialog.</div> </div> |
css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.dialogMark{ background: #FF00FF; top:70px; width:750px; height: 300px; text-align: right; position:absolute; display: ""; } .dialogMark .dialogContent{ background-color: #660066; top:0px; left:0px; height: 90%; width: 100%; color: Red; } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
showNoteDialog: function(flag){ var dialogMark = document.getElementById("dialogMark"); var dialogContent = document.getElementById("dialogContent"); var dialogIframe = document.getElementById("dialogIframe"); dialogMark.style.left = currMouseClickX + "px"; dialogMark.style.filter = "alpha(opacity=80)"; if (typeof(dialogIframe) == "undefined" || dialogIframe == null) { dialogIframe = document.createElement("iframe"); dialogIframe.id = "dialogIframe"; dialogIframe.style.backgroundColor = "#ADD8E6"; dialogIframe.style.top = "0px"; dialogIframe.style.left = "0px"; var width = window.screen.availWidth; var heigth = window.screen.availHeight + 200; dialogIframe.style.width = width + "px"; dialogIframe.style.height = heigth + "px"; dialogIframe.style.filter = "alpha(opacity=20)"; dialogIframe.style.position = "absolute"; dialogIframe.style.display = "none"; document.body.appendChild(dialogIframe); } //alert(flag) ; if (flag == "Y") { //alert("show"); dialogIframe.style.zIndex = 100000; dialogMark.style.zIndex = 100001; dialogContent.style.zIndex = 100002; dialogIframe.style.display = ""; dialogMark.style.display = ""; dialogContent.style.display = ""; } else { //alert("hidden"); dialogIframe.style.zIndex = -1; dialogMark.style.zIndex = -2; dialogContent.style.zIndex = -3; dialogIframe.style.display = "none"; dialogMark.style.display = "none"; dialogContent.style.display = "none"; } } |
