弹出窗口的位置Javascript Smart Popups That Don't Pop Off Screen
2006-01-22 09:59
561 查看
Javascript Smart Popups That Don't Pop Off Screen
By Nannette Thacker - 02/04/2001 Updated: 6/4/01
6/4/01 Update: Unfortunately, many people trying to use this function are clueless how javascript works, so they are asking how to make it work without using the two form elements below to populate the width and height of the popup box. Replace the below lines with actual numbers:
document.formtest.testheight.value,
document.formtest.testwidth.value,
Here is an example of use without using the form fields:
POPCLICK with 200 height x 300 width
Original article: 2/4/2001
The code on this page allows you to create and display smart popups -- popups that will center on your screen, or will popup near your link without popping off the edge of the screen. It also shows how to create a clickable popup or a popup that displays when you hover over the link with your mouse.
When creating a popup, do you ever get tired of having to change your values repeatedly, until you find just the right height and width for your popup? The below form allows you to try different heights and widths. Once you have found a size that fits your text, you may use those sizes to create your popup code.
Use the Test links to test each kind of popup. Then change the sizes and click the Test links again.
Test Width: Test Height:
Test POPCLICK
Test POPCLICKCENTER
Test POPUP
Test POPUPCENTER
The POPCLICK link requires that you click on the link. The test link will display the popup on the screen, near the link. If the link is near the edge of the screen -- left, right, top, bottom -- the javascript code will adjust the position of the popup so that it does not pop off the edge of the screen. The CLICK popups use the onClick event.
The POPCLICKCENTER test link will display the popup in the center of the screen when you click the link.
With both of the above links, you must close the window to remove the popup. If you fail to close the screen, however, it will go behind the active window, but selecting the test link again, or another one on your page, will close the previous screen and open the new link. (This keeps the user from having a lot of popup screens hidden behind the active screen.)
The POPUP test link will display the popup near the link, without going off the edge, when you hover over the link. The hover popups, use the onMouseOver event.
The POPUPCENTER test link will display the popup in the center of the screen when you hover over the link.
Here is an example of the Test POPCLICK falling on the edge of the screen. I'll place several on the screen so that depending on the width of your screen, hopefully one will be on the edge: Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK
Scroll your window so that the above line falls at the bottom of the screen, then click the link. You will see how it will pop above the cursor, instead of below the cursor.
Below is the entire code for the above form.
Below is the popup text file.
And finally, below is the javascript which calculates where to display the popup.
By Nannette Thacker - 02/04/2001 Updated: 6/4/01
6/4/01 Update: Unfortunately, many people trying to use this function are clueless how javascript works, so they are asking how to make it work without using the two form elements below to populate the width and height of the popup box. Replace the below lines with actual numbers:
document.formtest.testheight.value,
document.formtest.testwidth.value,
Here is an example of use without using the form fields:
POPCLICK with 200 height x 300 width
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup3', 200, 300, (version4 ? event : null));" ><b>POPCLICK with 200 height x 300 width</b></a> |
Original article: 2/4/2001
The code on this page allows you to create and display smart popups -- popups that will center on your screen, or will popup near your link without popping off the edge of the screen. It also shows how to create a clickable popup or a popup that displays when you hover over the link with your mouse.
When creating a popup, do you ever get tired of having to change your values repeatedly, until you find just the right height and width for your popup? The below form allows you to try different heights and widths. Once you have found a size that fits your text, you may use those sizes to create your popup code.
Use the Test links to test each kind of popup. Then change the sizes and click the Test links again.
Test Width: Test Height:
Test POPCLICK
Test POPCLICKCENTER
Test POPUP
Test POPUPCENTER
The POPCLICK link requires that you click on the link. The test link will display the popup on the screen, near the link. If the link is near the edge of the screen -- left, right, top, bottom -- the javascript code will adjust the position of the popup so that it does not pop off the edge of the screen. The CLICK popups use the onClick event.
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICK</b></a> |
The POPCLICKCENTER test link will display the popup in the center of the screen when you click the link.
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICKCENTER</b></a><br> |
With both of the above links, you must close the window to remove the popup. If you fail to close the screen, however, it will go behind the active window, but selecting the test link again, or another one on your page, will close the previous screen and open the new link. (This keeps the user from having a lot of popup screens hidden behind the active screen.)
The POPUP test link will display the popup near the link, without going off the edge, when you hover over the link. The hover popups, use the onMouseOver event.
<a href="javascript:void(0)" onMouseOver="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup1', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUP</b></a><br> |
The POPUPCENTER test link will display the popup in the center of the screen when you hover over the link.
<a href="javascript:void(0)" onMouseOver="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup2', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUPCENTER</b></a><br> |
Here is an example of the Test POPCLICK falling on the edge of the screen. I'll place several on the screen so that depending on the width of your screen, hopefully one will be on the edge: Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK
Scroll your window so that the above line falls at the bottom of the screen, then click the link. You will see how it will pop above the cursor, instead of below the cursor.
Below is the entire code for the above form.
<form name="formtest" action="/articles/articles/javascript/popups.asp" method="post"> Test Width: <input maxlength=3 size=3 type=text value="220" name="testwidth"> Test Height: <input maxlength=3 size=3 type=text value="120" name="testheight"> <br> |
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICK</b></a> |
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICKCENTER</b></a><br> |
<a href="javascript:void(0)" onMouseOver="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup1', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUP</b></a><br> |
<a href="javascript:void(0)" onMouseOver="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup2', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUPCENTER</b></a><br> |
</form> |
Below is the popup text file.
<HTML> <HEAD> <TITLE>My Popup</TITLE> </HEAD> <BODY> <B>This is a Popup Test</b><P> Now is the time for all good popups to come to the aid of the web programmer. Now is the time for all good popups to come to the aid of the web programmer.<P> </BODY> </HTML> |
And finally, below is the javascript which calculates where to display the popup.
<script language="JavaScript"> <!-- // by Nannette Thacker // http://www.shiningstar.net // This script allows you to display a popup that does not pop // off the edge of the screen if the link is toward the edge // If the link sits on the edge of the screen, the popup will // pop the other direction // also allows a popcenter in the middle of the screen // --> var version4 = (navigator.appVersion.charAt(0) == "4"); var popupHandle; function closePopup() { if(popupHandle != null && !popupHandle.closed) popupHandle.close() } function displayPopup(position,url,name,height,width,evnt) { // Nannette Thacker http://www.shiningstar.net // position=1 POPUP: makes screen display up and/or left, // down and/or right // depending on where cursor falls and size of window to open // position=2 CENTER: makes screen fall in center var properties = "toolbar=0,location=0,height="+height properties = properties+",width="+width var leftprop, topprop, screenX, screenY, cursorX, cursorY, padAmt if(navigator.appName == "Microsoft Internet Explorer") { screenY = document.body.offsetHeight screenX = window.screen.availWidth } else { // Navigator coordinates // screenY = window.outerHeight // screenX = window.outerWidth // change made 3/16/01 to work with Netscape: screenY = screen.height; screenX = screen.width; } if(position == 1) // if POPUP not CENTER { cursorX = evnt.screenX cursorY = evnt.screenY padAmtX = 10 padAmtY = 10 if((cursorY + height + padAmtY) > screenY) // make sizes a negative number to move left/up { padAmtY = (-30) + (height*-1); // if up or to left, make 30 as padding amount } if((cursorX + width + padAmtX) > screenX) { padAmtX = (-30) + (width*-1); // if up or to left, make 30 as padding amount } if(navigator.appName == "Microsoft Internet Explorer") { leftprop = cursorX + padAmtX topprop = cursorY + padAmtY } else { // adjust Netscape coordinates for scrolling leftprop = (cursorX - pageXOffset + padAmtX) topprop = (cursorY - pageYOffset + padAmtY) } } else // CENTER { leftvar = (screenX - width) / 2 rightvar = (screenY - height) / 2 if(navigator.appName == "Microsoft Internet Explorer") { leftprop = leftvar topprop = rightvar } else { // adjust Netscape coordinates for scrolling leftprop = (leftvar - pageXOffset) topprop = (rightvar - pageYOffset) } } if(evnt != null) { properties = properties+",left="+leftprop properties = properties+",top="+topprop } closePopup() popupHandle = open(url,name,properties) } //--> </script> |
相关文章推荐
- javascript:window.open弹出窗口的位置问题
- javascript:window.open弹出窗口的位置问题
- JavaScript弹出新窗口并控制窗口移动到指定位置的方法
- Jquery 弹出窗口插件开发-在屏幕固定位置停留[原创]
- Javascript弹出窗口的各种方法总结
- 使用javascript判断IE是否阻止弹出窗口
- 转:javascript IE8/IE9上打开弹出窗口时,地址栏和状态栏仍显示的解决办法
- javascript 弹出浮动层,并锁定当前窗口一
- JAVASCRIPT弹出窗口大总结 javascript
- javascript窗口宽高,鼠标位置,滚动高度(详细解析)
- javascript实现的固定位置悬浮窗口实例
- JavaScript常用小技巧—弹出窗口
- GridView弹出新页面/弹出制定大小位置新窗口
- Flex4.6 Pop弹出窗口中文(汉字)输入发问题(弹出的对话框不支持中文录入 )
- javascript弹出窗口全掌握
- 基于JavaScript实现图片点击弹出窗口而不是保存
- PHP连接mysql数据库,调用Google Map显示不同地方地图信息,使用Javascript弹出悬浮信息窗口展示。
- javascript弹出窗口实现代码
- javascript弹出窗口实现代码
- JavaScript弹出模式窗口