Popup Div with objects on

**RamananKalirajan** · Jan 22 '10, 11:23 AM

Hi Ismail,

Here with this I am attaching a basic Pop Up in HTML.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">

function showPopUp()
{
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';
}

function closePopUp()
{
	document.getElementById('light').style.display='none';
	document.getElementById('fade').style.display='none';
}

</script>
<style type="text/css">
/* LightBox */
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:#000;
	z-index:1001;
	-moz-opacity: 0.2;
	opacity:.20;
	filter: alpha(opacity=20);
}
.white_content {
	display:none;
	position: absolute;
	top:50%;
	left:50%;
	z-index:9999;
	width:262px;
	height:119px;
	margin:-131px 0 0 -59px;
	text-align:left;
	background: #FFFFFF;
	border: 1px solid #333333;
}
/* Window Settings */
* {
	margin:0px;
	padding:0px;
}
.bgErrorMessage {
	width:262px;
	height:119px;
	background:url(../images/log/bgErrorMessage.png) no-repeat left top;
	position:relative;
}
</style>
</HEAD>

<BODY>
<a href="javascript:showPopUp();">Open Pop Up </a>
<div id="light" class="white_content">
  <div class="bgErrorMessage">
    <h3>Confirm Message</h3>
    <h4>Do you really want to delete?</h4>
	<input type="button" value="close" onclick="closePopUp();">
  </div>
</div>
<div id="fade" class="black_overlay"> </div>
</BODY>
</HTML>

Thanks and Regards
Ramanan Kalirajan

**ismailc** · Jan 22 '10, 12:03 PM

Hi, Your code & example works great.

But i can't seem to load my objects from my stylesheet ine the div.
The objects displays in the div on it own, but not in the PopUp.

Please help :(

Code:

<div id="light" class="white_content">
  <div class="bgErrorMessage">
     <h3>Confirm Message</h3>
      <h4>Do you really want to delete?</h4>
 
[B]    <xsl:for-each select="Activity/ObjectGroup[@type='default']/Object">
      <tr class="rowDetail">
          <td colspan="8">
	<xsl:call-template name="CreateObject">
	     <xsl:with-param name="Object" select="." />
	  </xsl:call-template>				
          </td>
      </tr>
     </xsl:for-each>[/B]

  <input type="button" value="close" onclick="closePopUp();"></input>
 </div>
</div

**ismailc** · Jan 22 '10, 12:34 PM

I managed to get it to show the objects but it does not like the
<tr><td>

How would i aling the objects within the div as i can't use the <td> & <tr>

Secondly, when the window pops up the top of my main brwoser has a thick black broder - how do i remove?

Regards

**ismailc** · Jan 22 '10, 12:43 PM

I got past thje second problem i had, filtered out the

Now only to get the aligninging with <tr><td>

Thank You

Code:

.black_overlay {
/*background-color:#000;*/

**RamananKalirajan** · Jan 23 '10, 05:21 AM

Use some div's to have the alignment. I am not that much good at XLS.

Thanks and Regards
Ramanan Kalirajan

**ismailc** · Jan 23 '10, 07:32 AM

Hi, RamananKaliraja n Please help - under pressure to complete a project.

How can i let the the Parent/Main window be disabled like a ghost affect when the the Div is Poped Up with the above script?

Anxiously awaiting your feedback :(

**RamananKalirajan** · Jan 23 '10, 12:25 PM

Hi Ismailc,
I found out the problem of yours.... first Uncomment

Code:

# .black_overlay {
# /*background-color:#000;*/

for the above CSS and add this styles in the page

Code:

html,body
{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: tahoma;
	font-size: 11px;
	overflow:hidden;
}

Sorry for the late reply yaar...

Thanks and Regards
Ramanan Kalirajan

**ismailc** · Jan 23 '10, 01:16 PM

I cant seem to make the main window disabled?
I added the code but no luck :(

**RamananKalirajan** · Jan 23 '10, 02:29 PM

Hi Ismail try this code, Just place the div's having the Id's "fade" and "light" at the bottom of your page.. That is no contents of your page should be written after that.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">

function showPopUp()
{
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';
}

function closePopUp()
{
	document.getElementById('light').style.display='none';
	document.getElementById('fade').style.display='none';
}

</script>
<style type="text/css">

html,body
{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: tahoma;
	font-size: 11px;
	overflow:hidden;
}

/* LightBox */
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:#000;
	z-index:1001;
	-moz-opacity: 0.2;
	opacity:.20;
	filter: alpha(opacity=20);
}
.white_content {
	display:none;
	position: absolute;
	top:50%;
	left:50%;
	z-index:9999;
	width:262px;
	height:119px;
	margin:-131px 0 0 -59px;
	text-align:left;
	background: #FFFFFF;
	border: 1px solid #333333;
}
/* Window Settings */
* {
	margin:0px;
	padding:0px;
}
.bgErrorMessage {
	width:262px;
	height:119px;
	background:url(../images/log/bgErrorMessage.png) no-repeat left top;
	position:relative;
}
</style>
</HEAD>

<BODY>
<a href="javascript:showPopUp();">Open Pop Up </a>

<!-- This content should be there in the bottom of your page -->
<div id="fade" class="black_overlay"> </div>
<div id="light" class="white_content">
  <div class="bgErrorMessage">
    <h3>Confirm Message</h3>
    <h4>Do you really want to delete?</h4>
	<input type="button" value="close" onclick="closePopUp();">
  </div>
</div>

</BODY>
</HTML>

Thanks and Regards
Ramanan Kalirajan

**ismailc** · Jan 23 '10, 03:19 PM

Thank You, when i copy the code to a blank htm then it works fine but struggling to get it going in the xslt file.

will get back soon

**ismailc** · Jan 23 '10, 04:17 PM

Hi, Winning i manged to disable the main window as i had to put the div in my aspx page & not xslt file.

Problem i now have is that the page does not scroll down & cannot see all the objects.

That is without the disable window, if a remove the html css then it fine.

???

**ismailc** · Jan 23 '10, 04:23 PM

Hi, I can't thank you enough :) really making prgress

I removed the HTML css below & now i can see all the objects again, but when disable the window is disabled but not the entire with scrolled objects below

Code:

html,body 
{ 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    font-family: tahoma; 
    font-size: 11px; 
    overflow:hidden; 
}

**RamananKalirajan** · Jan 24 '10, 07:22 AM

Keep Moving Forward, Post back if you have any more queries...

Thanks and Regards
Ramanan Kalirajan

Popup Div with objects on

Popup Div with objects on

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment