页面中PopUp画面的制作包括右击菜单,PopupTip等。 可以直接用浏览器运行,主要参考MSDN的popup部分。只为了不让忘记而已。自己的笔记。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>popup窗口测试-By_THINKINGALL</title> <mce:script type="text/javascript"><!-- function popupMsg() { var oPopup = window.createPopup(); var oPopBody = oPopup.document.body; var oPopupWidth = 250; var oPopupHeight = 150; var showWidth = window.screen.width - oPopupWidth; var showHeight = window.screen.Height - oPopupHeight; oPopBody.style.backgroundColor = "blue"; oPopup.show(showWidth, showHeight, oPopupWidth, oPopupHeight); } // --></mce:script> </head> <body οnlοad="popupMsg()"> <br /> <li>1</li> <!-- 例子1:Glossary开始 -----------------------------------> <mce:style type="text/css"><!-- .showDetailInf { background:#ffffcc; border:1px solid black; padding:4px; width:300px; font-family:verdana; font-size:70%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='yellowgreen', EndColorStr='#FFFFFF'); } .showText { cursor:hand; font-weight:bold; color:green; } --></mce:style><style type="text/css" mce_bogus="1"> .showDetailInf { background:#ffffcc; border:1px solid black; padding:4px; width:300px; font-family:verdana; font-size:70%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='yellowgreen', EndColorStr='#FFFFFF'); } .showText { cursor:hand; font-weight:bold; color:green; } </style> <mce:script type="text/javascript"><!-- // 注释显示(Popup Glossary Definitions) function showDetailInf(obj) { var oPopup = window.createPopup(); var oPopupBody = oPopup.document.body; // 设置popup样式,ffffcc为浅黄色,border为1px实线黑色, // 边界和内容之间padding为4px,宽300px,字体为verdana,大小为70% // 设置颜色为渐变filter:progid(过虑,羽化) oPopupBody.innerHTML = "<div style="/" mce_style="/""background:#ffffcc;border:1px solid black;padding:4px;width:300px;font-family:verdana;font-size:70%;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='yellowgreen', EndColorStr='#FFFFFF');/">" + obj.innerHTML + "</div>"; // 由于文字长度是不定的,先显示,通过scrollHeight获得实际的高度,再重新显示 oPopup.show(0,0,300,0); var realHeight = oPopupBody.scrollHeight; oPopup.hide(); // 在事件元素event.srcElement(0,18)坐标显示显示popup窗口 oPopup.show(0,18,300,realHeight,event.srcElement); } // --></mce:script> the <span id="brass" class="showText" οnclick="showDetailInf(oBrass)">brass</span> hat was impressed by the grace of dancer's <span id="entrechat" class="showText" οnclick="showDetailInf(oEntrechat)">entrechat</span> <div style="display:none" mce_style="display:none"> <div id="oBrass"> <B>Brass:</B><br /> 黄铜色,这里是指军人。(a high-ranking official) </div> <div id="oEntrechat"> <b>Entrechat:</b><br /> 芭蕾舞的一种动作名称。(A jump in ballet during which the dancer crosses the legs a number of times,alternatively back and forth.) </div> </div> <br /> <br /> <!-- 例子2: ToolTip START -----------------------------------------> <li/>2</li> <mce:style type="text/css"><!-- .toolTip { background:#ffffcc; padding:4px; width:300px; font-family:verdana; font-size:70%; border:1px solid black; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='yellowgreen', EndColorStr='#FFFFFF'); } .toolTipText { cursor:hand; font-weight:bold; color:green; } --></mce:style><style type="text/css" mce_bogus="1"> .toolTip { background:#ffffcc; padding:4px; width:300px; font-family:verdana; font-size:70%; border:1px solid black; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='yellowgreen', EndColorStr='#FFFFFF'); } .toolTipText { cursor:hand; font-weight:bold; color:green; } </style> <mce:script type="text/javascript"><!-- // 注释显示(Popup3 Glossary Definitions) var oPopup3 = window.createPopup(); function showToolTip(obj) { var oPopupBody = oPopup3.document.body; // 设置popup样式,ffffcc为浅黄色,border为1px实线黑色, // 边界和内容之间padding为4px,宽300px,字体为verdana,大小为70% // 设置颜色为渐变filter:progid(过虑,羽化) oPopupBody.innerHTML = "<div style="/" mce_style="/""background:#ffffcc;border:1px solid black;padding:4px;width:300px;font-family:verdana;font-size:70%;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='yellowgreen', EndColorStr='#FFFFFF');/">" + obj.innerHTML + "</div>"; // 由于文字长度是不定的,先显示,通过scrollHeight获得实际的高度,再重新显示 oPopup3.show(0,0,300,0); var realHeight = oPopupBody.scrollHeight; oPopup3.hide(); // 在事件元素event的加(0,18)坐标显示显示popup窗口 var showX = event.offsetX + 0; var showY = event.offsetY + 2; oPopup3.show(showX,showY,300,realHeight,document.body); } function hideToolTip() { oPopup3.hide(); } // --></mce:script> the <span id="brass3" class="toolTipText" οnmοuseοver="showToolTip(oBrass3)" οnmοuseοut="hideToolTip()">brass</span> hat was impressed by the grace of dancer's <span id="entrechat3" class="toolTipText" οnmοuseοver="showToolTip(oEntrechat3)" οnmοuseοut="hideToolTip()">entrechat</span> <div style="display:none" mce_style="display:none"> <div id="oBrass3"> <B>Brass:</B><br /> 3黄铜色,这里是指军人。(a high-ranking official) </div> <div id="oEntrechat3"> <b>Entrechat:</b><br /> 3芭蕾舞的一种动作名称。(A jump in ballet during which the dancer crosses the legs a number of times,alternatively back and forth.) </div> </div> <br/><br/> <li>3</li> <!-- 例子3:oncontextmenu START ----------------------------> <mce:style type="text/css"><!-- .rigthClickArea { width:300px; height:150px; font-family:verdana; font-size:80%; height:30px; background:gold; border:1px solid black; padding:4px; cursor:default; } --></mce:style><style type="text/css" mce_bogus="1"> .rigthClickArea { width:300px; height:150px; font-family:verdana; font-size:80%; height:30px; background:gold; border:1px solid black; padding:4px; cursor:default; } </style> <mce:script type="text/javascript"><!-- function contextMenu(obj) { var oPopup = window.createPopup(); var oPopupBody = oPopup.document.body; // 设置menu的显示位置,事件右下角偏移2px var oPopupX = event.offsetX + 2; var oPopupY = event.offsetY + 2; // 写入菜单的命令 //oPopupBody.style.backgroundColor = "#e4e4e4"; oPopupBody.innerHTML = obj.innerHTML; // 由于文字长度是不定的,先显示,通过scrollHeight获得实际的高度,再重新显示 oPopup.show(0,0,200,0); var realHeght = oPopupBody.scrollHeight; oPopup.hide(); // 弹出菜单 oPopup.show(oPopupX,oPopupY,200,realHeght,event.srcElement); return false; } function popupWin(url) { alert(url); window.open(url,"_blank","width=800,height=500,left=100,top=100,menubar=1,location=1,toolbar=1,status=1,addressbar=1,scrollbars=1,status=1,resizable=1"); } //document.oncontextmenu = function(){ // contextMenu(); // return false; //} // --></mce:script> create a new contextmenu for mouse right click <span id="rightClickArea" class="rigthClickArea" οncοntextmenu="return contextMenu(oContextMenu);"> right click here</span> <div id="oContextMenu" style="display:none" mce_style="display:none"> <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.open(this.title,'_blank','width=800,height=500,left=100,top=100')" title="http://www.baidu.com"> baidu搜索</span> </div> <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.location.href='http://www.google.com'" title="http://www.google.com"> google搜索</span> </div> <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.open(this.title,'_blank', 'width=800,height=500,left=100,top=100,menubar=1,location=1,toolbar=1,status=1,addressbar=1,scrollbars=1,status=1,resizable=1')" title="http://www.taobao.com"> 淘宝啊淘啊淘</span> </div> </div> <br /><br /> <!-- 例子4: Custom Menus START 自定义------------------------------> <li/>4</li> <mce:style type="text/css"><!-- .clickArea { width:300px; height:150px; font-family:verdana; font-size:80%; height:30px; background:gold; border:1px solid black; padding:4px; cursor:hand; } .popupScorll { position: absolute; top: 0; left: 0; overflow: scroll; overflow-x: hidden; width: 300px; height: 100px; scrollbar-base-color: #3366CC; border-bottom: 2px solid black; scrollbar-highlight-color: #99CCFF; scrollbar-arrow-color: white;/* 这是必须设置的,否则没有arrow,scroll成disable状态,记录无法显示 */ } --></mce:style><style type="text/css" mce_bogus="1"> .clickArea { width:300px; height:150px; font-family:verdana; font-size:80%; height:30px; background:gold; border:1px solid black; padding:4px; cursor:hand; } .popupScorll { position: absolute; top: 0; left: 0; overflow: scroll; overflow-x: hidden; width: 300px; height: 100px; scrollbar-base-color: #3366CC; border-bottom: 2px solid black; scrollbar-highlight-color: #99CCFF; scrollbar-arrow-color: white;/* 这是必须设置的,否则没有arrow,scroll成disable状态,记录无法显示 */ } </style> <mce:script type="text/javascript"><!-- function customMenu(obj) { var oPopup = window.createPopup(); var oPopupBody = oPopup.document.body; // 写入菜单的命令 //oPopupBody.style.backgroundColor = "#e4e4e4"; oPopupBody.innerHTML = obj.innerHTML; // 由于文字长度是不定的,先显示,通过scrollHeight获得实际的高度,再重新显示 // oPopup.show(0,0,200,0); // 获取菜单显示高度 // var realHeght = oPopupBody.scrollHeight; // oPopup.hide(); // 获取菜单显示宽度 var popupWidth = event.srcElement.scrollWidth; // 获取菜单显示Y-coordinate var showY = event.srcElement.scrollHeight; // 弹出菜单 oPopup.show(0,showY,popupWidth,100,event.srcElement); return false; } function popupWin(url) { alert(url); window.open(url,"_blank","width=800,height=500,left=100,top=100,menubar=1,location=1,toolbar=1,status=1,addressbar=1,scrollbars=1,status=1,resizable=1"); } //document.oncontextmenu = function(){ // contextMenu(); // return false; //} // --></mce:script> create a new contextmenu for mouse right click <span class="clickArea" οnclick="return customMenu(oCustomMenu);"> click here</span> <div id="oCustomMenu" style="display:none" mce_style="display:none" class="clickArea"> <div style=" position: absolute; top: 0; left: 0; overflow: scroll; overflow-x:hidden; width:300px; height:100px; scrollbar-base-color:#336677; border-bottom: px solid black; scrollbar-highlight-color: #99CCFF; scrollbar-arrow-color: white;" > <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.open(this.title,'_blank','width=800,height=500,left=100,top=100')" title="http://www.baidu.com"> baidu搜索</span> </div> <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.location.href='http://www.google.com'" title="http://www.google.com"> google搜索</span> </div> <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.open(this.title,'_blank', 'width=800,height=500,left=100,top=100,menubar=1,location=1,toolbar=1,status=1,addressbar=1,scrollbars=1,status=1,resizable=1')" title="http://www.taobao.com"> 淘宝啊淘啊淘</span> </div> <div οnmοuseοut="this.style.background='#e4e4e4';" οnmοuseοver="this.style.background='gold';" style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;" mce_style=" /* 字体 */ font-family:verdana; /* 字号 */ font-size:80%; /* 高度 */ height:30px; /* 背景色 */ background:#e4e4e4; /* 边框 */ border:1px solid black; /* 边距 */ padding:4px; /* 指针形状 */ cursor:hand;"> <span οnclick="parent.open(this.title,'_blank', 'width=800,height=500,left=100,top=100,menubar=1,location=1,toolbar=1,status=1,addressbar=1,scrollbars=1,status=1,resizable=1')" title="http://www.taobao.com"> 没有地方了还是淘宝</span> </div> </div> </div> </br> <a href="view/del/del0201g01.html" mce_href="view/del/del0201g01.html">del</a> </body> </html>