Jump to content

Bring css popup to the top


rogerio
 Share

Recommended Posts

I'm not sure what you're asking. You set the z-index via CSS. I don't know what else you're asking. You can set the z-index on as many elements as you want. If your code is opening several popups and you need to keep track of the z-index of each one, then I would use an array to hold that data.

Link to comment
Share on other sites

If there are 5 popups open at the same time, they will have zindex values of 1-5. If the popup with the zindex of 3 is clicked on and it is given the value of 5 to bring it on top, what happens to the popup that has the current value of 5? It seems the one that has the current value of 5 has to be changed so the popup 3 can be brought to the top or there will be a collision. I know I could give the value of 6 to the popup that is clicked on, but there is the problem of another popup having been opened in the mean time that has that index already. In other words, every popup and its' value must be tracked some way unless there is a method for reording the zindex of all the popups leaving the highest index on the popup that the user selected.

Link to comment
Share on other sites

You either have to loop through all popups, and reset their z-index to low value, and set the current popup z-index to high value to bring it above the others, or use classname that uses a high z-index value, remove classname from currently opened popups and apply to most current popup on opening.

Link to comment
Share on other sites

EDIT: Putting all this together, this is what I came up with on 3 images and they hold their position in the line-up. If there is a better idea give it to me... thanks

function incIndex(obj){var elements = document.getElementsByTagName("*");var highest_index = 0;var p = document.getElementById(obj);var x;    for (var i = 0; i < elements.length - 1; i++)         {        if (parseInt(elements[i].style.zIndex) > highest_index)        {            highest_index = parseInt(elements[i].style.zIndex);            x = elements[i].style.zIndex;        }    }    p.style.zIndex = parseInt(x)+1;}

Edited by rogerio
Link to comment
Share on other sites

Using you code from previous posting, If your popup element is div with class name 'popup' loop through all div elements, and with a div element with classname 'popup' set to default lower z-index value, then set current selected to higher

var div_elemts = document.getElementsByTagName("div");for(i=0;i<div_elemts.length; i++){if(div_elemts[i].className=="popup")    {    div_elemts[i].style.zIndex="50";    }}

obj.style.zIndex="100";

Link to comment
Share on other sites

thanks dsonesuk. (on a note: I see you sent this on the 3rd and I just got the email on the 5th) I have ran into another problem with getting "resize:both" working. As you can see I have 3 div's and I want to resize all 3. The only way I can see is to place the resize on the "main" div but it doesn't show. I know this only works in FF.

<html><head><script type="text/javascript">function ShowPop(id){  document.getElementById(id).style.display = "block";}function HidePop(id){   document.getElementById(id).style.display = "none";}</script> 	<style>		#main { border: 8px #000 solid; width: 400px; height: 300px; margin: auto; display:none; resize:both;}		#one { width: 100%; height: 25px; background-color: blue; display: inline-block; }		#two { width: 100%; height: 255px; background-color: red; display: inline-block; overflow:auto;}	</style></head><body><a href='#' onclick='ShowPop("main");'>Show popup</a><p></p><div id="main">	<span id="one"><img src='x11_move.gif' left='0px'><img src='x11_close.gif' style='float:right;' onclick='HidePop("main");'>Hide popup></span>    	<span id="two">A whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of text</span></div>

Edited by rogerio
Link to comment
Share on other sites

ok, I got it working, but it took a trick in "#two" which can probably be improved on:

	    #main { border:1px solid; width:400px; height:300px; display:none; resize:both; [color=#ff0000]overflow:hidden; background-color:red;[/color]}	    #one { border-radius:5px; width: 100%; height: 25px; background-color: blue; display:inline-block; }	    #two { [color=#ff0000]height: 91%;[/color] width: 100%; [color=#ff0000]background-color:red;[/color] display:inline-block; overflow:auto;}

Link to comment
Share on other sites

How about

<div id="main">		<div id="one"><img src='x11_move.gif' left='0px'><img src='x11_close.gif' style='float:right;' onclick='HidePop("main");'>Hide popup></div>  		<div id="two">A whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of text THE END</div></div>

	#main {	background-color: red;	border-radius: 10px;	float: left; /* or position: absolute; */}			#one {	background-color: blue;	border-radius: 10px 10px 0 0;	height: 25px;	line-height: 25px;	padding-left: 10px;}			#two {	background-color: red;	height: 300px;	margin: 5px 5px 5px 10px;	overflow: auto;	resize: both;	width: 400px;}

Edited by dsonesuk
Link to comment
Share on other sites

The popup looks great but I ran into a problem trying to get it to move; how do I incorporate this with the popup:

var ie = document.all;var nn6 = document.getElementById &&! document.all;var isdrag = false;var x, y;var dobj;var xL, yT;function movemouse( e ){   if( isdrag )  {   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;   return false;  }}function selectmouse( e ){   var fobj	   = nn6 ? e.target : event.srcElement;   var topelement = nn6 ? "HTML" : "BODY";  while (fobj.tagName != topelement && fobj.className != "dragme")  {   fobj = nn6 ? fobj.parentNode : fobj.parentElement;  }    if (fobj.className=="dragme")  {   isdrag = true;   dobj = fobj.parentNode.parentNode;   tx = parseInt(dobj.style.left+0);   ty = parseInt(dobj.style.top+0);   x = nn6 ? e.clientX : event.clientX;   y = nn6 ? e.clientY : event.clientY;   document.onmousemove=movemouse;   return false;  }}function styledPopupClose(pop){   document.getElementById(pop).style.display = "none";}document.onmousedown=selectmouse;document.onmouseup=newFunction("isdrag=false");

Link to comment
Share on other sites

dsonesuk, this is pretty good size (hope no one minds), but here is a working example of dragging a popup. Maybe you can fit your popup example into it??? Notice the note in the 'move' scrip (the first script) about changing the 'parenNode' to match the depth of the popup in the '<span></span>' levels.

<?xml  version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC><html xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word"xmlns="http://www.w3.org/TR/REC-html40"><head><link rel='stylesheet' href='sample.css' type='text/css'><title>DHTML Popups Sample 06</title><script type='text/javascript'>/* ====================THE MOVE SCRIPT==================*/var ie = document.all;var nn6 = document.getElementById &&! document.all;var isdrag = false;var x, y;var dobj;function movemouse( e ){   if( isdrag )  {   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;   return false;  }}function selectmouse( e ){   var fobj	   = nn6 ? e.target : event.srcElement;   var topelement = nn6 ? "HTML" : "BODY";  while (fobj.tagName != topelement && fobj.className != "dragme")  {   fobj = nn6 ? fobj.parentNode : fobj.parentElement;  }	if (fobj.className=="dragme")  {   isdrag = true;//Add or delete 'parentNode' for the depth of the popup:   dobj = fobj.parentNode;   tx = parseInt(dobj.style.left+0);   ty = parseInt(dobj.style.top+0);   x = nn6 ? e.clientX : event.clientX;   y = nn6 ? e.clientY : event.clientY;   document.onmousemove=movemouse;   return false;  }}function styledPopupClose(pop){   document.getElementById(pop).style.display = "none";}document.onmousedown=selectmouse;document.onmouseup=newFunction("isdrag=false");/* ====================END OF THE MOVE SCRIPT==================*/ function ShowPop(event, objID) /* these variables have been tested and work */{var obj=document.getElementById(objID);var wid;if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){  x=event.clientX;  y=event.clientY;}else{  x=event.pageX;  y=event.pageY;}w=(screen.availWidth)/4;h=(screen.availHeight)/4;obj.style.Width=w+'px';obj.style.height=h+'px'; obj.style.position = "absolute";obj.style.left = x+"px";obj.style.top = y+10+"px";obj.style.display = "block";}function HidePop(popID){var obj=document.getElementById(popID);   obj.style.display = "none";}</script><style type='text/css'>.dragme{cursor: move;}.popup{   position:absolute;   left:-9999px;   width:300px;   height:400px;   border-style:solid;   border-width:4px;   border-color:blue;   background-color:#000000;/*   padding: 5px; */   font-family: Tahoma;   font-size: 10pt;   z-index:2;   display:none;   overflow:hidden;   border-radius:4px;   resize:both;} /* ie bug needed to make span show*/.dragme{cursor: move;}a{   text-decoration:none;}.popup a:hover span{top:0px;}.close{ float:right;cursor:pointer;}.text{ overflow:auto;width:376px;height:277px;padding-left:2px;padding-right:2px;color:white;}</style></head><body><span id='popup3' class='popup'>  <img src='../images/x11_move.gif' class='dragme' onMouseover='ddrivetip("Move", 40);' onMouseout='hideddrivetip();'>  <img src='../images/x11_close.gif' class='close' onMouseover='ddrivetip("Close", 40);' onMouseout='hideddrivetip(); 'onclick='HidePop("popup3");'>  <span id='text' style="color:white;">some text</span></span><a href="#" onMouseDown='ShowPop(event, "popup3");'><u>Load Popup</u></a></body></html>

Link to comment
Share on other sites

That script is old, and refers to Netscape 6, the browser sniffing is unreliable, and does not work in IE9, also the !doctype is unrecognised and reverts to quirks mode, which IE requires to work properly like other better browsers. You should look for a more up to date script that will work with current browsers.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...