Make a kindof popup window appear using javascript
I 开发者_如何学运维have a HTML page & when a link is clicked I am trying to make a popup element(just a div box that appears over the link) appear above the link that was clicked. I use javascript to do this, but my problem is that the popup element gets positioned below the link when it should be above the link.
Do you know what I am doign incorrectly & how I can fix it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="all">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: center; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { padding: 20%; background-color: green; }
.container { background-color: white; }
.newEle { width: 100px; height: 100px; background-color: red; }
-->
</style>
<script type="text/javascript">
function getOffset( el )
{
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.parentNode;
}
return { top: _y, left: _x };
}
function onClick( n, ele )
{
// Should display a popup box just above the HTML element called "ele"
// but what actually happens is that the box is displayed below the element
// called "ele"
var infoBox = document.createElement("div");
infoBox.style.zIndex = "5";
//infoBox.offsetRight = ele.offsetRight;
//infoBox.offsetBottom = parseInt(ele.offsetBottom, 10) - 200 + "px";
infoBox.style.x = getOffset( ele ).left + "px";
infoBox.style.y = getOffset( ele ).top - 200 + "px";
infoBox.style.width = "200px";
infoBox.style.height = "200px";
infoBox.style.backgroundColor = "blue";
infoBox.innerHTML = "Hello";
document.body.appendChild( infoBox );
}
</script>
</head>
<body>
<div class="container">
<a class="newEle" onclick="onClick(1,this)">Create New Element</a>
</div>
</body>
</html>
add this to your css.
.container, .newEle {display: block; float: left;}
Then position your elements absolutely.
(Aside from Carl Griffiths post take a look on this)
Inspecting your code, the reason why it is below your link is:
- Your appending the new element after your div.
- You said you have a x and y style. But it is not applying on that element. (Use firebug for FF or in Chrome use developer-tools)
- Let say you successfully add the position style on the new element. Your next problem is, it will not visible on the page. What I mean is, if you set the top position to -200px it will relatively position to your body not in your link.
Possible Fix:
Instead of using
document.body.appendChild( infoBox );Add an id to your div likeid="container". Then replace your append with this.var parentContainer = document.getElementById('container'); parentContainer.insertBefore(infoBox,parentContainer.firstChild);I'm not pretty sure about your
infoBox.style.xbut instead you can use thisinfoBox.style.left = "0px;"andinfoBox.style.top = "-200px"then you must use positioning e.g. relative/absoluteIf you follow the second option you must properly set the CSS style of your div. Specially this
body { padding: 20%; background-color: #CCCCCC; }If you find it difficult to understand my explanation. Here a sample code (jsfiddle) it is not as perfect as you want. But you can use enhance on your needs.
I've got a component that might make this simpler - it's not as complete as framework would be, but it's pretty good at what it does:
http://depressedpress.com/javascript-extensions/dp_panelmanager/
It basically creates "panels" out of HTML elements (either existing or generated) and provides methods to work with them. Position, Size, Opacity, simple animations, collision detection, bearing, etc. It's definately got holes, but it's come in handy.
One of the examples is a simple "popup definitions" thing that should be pretty easy to modify to fit your needs.
Basically you create panels for your popups and also turn your click targets into panels (the example shows how you do that with minimal code). Then your onClick event handler might have something like this:
// Set the Popup panel to the same position as the clicked element.
PopPanel.setPosition(this.getPosition());
// Shift the position of the popup panel up 210 pixels
PopPanel.shiftPosition([-210, 0]);
// Show the panel
PopPanel.setDisplay("show");
// Fade the panel in (Animate opacity)
PopPanel.setOpacity(100, 0 , 200);
Of course you're not too far off - and the advise already given will probably fix your current problem.
加载中,请稍侯......
精彩评论