By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,594 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

Popup Div with objects on

100+
P: 200
Good day, I have searched for a Popup Div.

I have objects in my div i would like to popup sepearte to the current window.

The must popup like a seperate window with its objects on

Any ideas, please!
Jan 22 '10 #1

✓ answered by RamananKalirajan

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.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <script type="text/javascript">
  10.  
  11. function showPopUp()
  12. {
  13.     document.getElementById('light').style.display='block';
  14.     document.getElementById('fade').style.display='block';
  15. }
  16.  
  17. function closePopUp()
  18. {
  19.     document.getElementById('light').style.display='none';
  20.     document.getElementById('fade').style.display='none';
  21. }
  22.  
  23. </script>
  24. <style type="text/css">
  25.  
  26. html,body
  27. {
  28.     height: 100%;
  29.     width: 100%;
  30.     margin: 0px;
  31.     padding: 0px;
  32.     font-family: tahoma;
  33.     font-size: 11px;
  34.     overflow:hidden;
  35. }
  36.  
  37. /* LightBox */
  38. .black_overlay {
  39.     display: none;
  40.     position: absolute;
  41.     top: 0%;
  42.     left: 0%;
  43.     width: 100%;
  44.     height: 100%;
  45.     background-color:#000;
  46.     z-index:1001;
  47.     -moz-opacity: 0.2;
  48.     opacity:.20;
  49.     filter: alpha(opacity=20);
  50. }
  51. .white_content {
  52.     display:none;
  53.     position: absolute;
  54.     top:50%;
  55.     left:50%;
  56.     z-index:9999;
  57.     width:262px;
  58.     height:119px;
  59.     margin:-131px 0 0 -59px;
  60.     text-align:left;
  61.     background: #FFFFFF;
  62.     border: 1px solid #333333;
  63. }
  64. /* Window Settings */
  65. * {
  66.     margin:0px;
  67.     padding:0px;
  68. }
  69. .bgErrorMessage {
  70.     width:262px;
  71.     height:119px;
  72.     background:url(../images/log/bgErrorMessage.png) no-repeat left top;
  73.     position:relative;
  74. }
  75. </style>
  76. </HEAD>
  77.  
  78. <BODY>
  79. <a href="javascript:showPopUp();">Open Pop Up </a>
  80.  
  81. <!-- This content should be there in the bottom of your page -->
  82. <div id="fade" class="black_overlay"> </div>
  83. <div id="light" class="white_content">
  84.   <div class="bgErrorMessage">
  85.     <h3>Confirm Message</h3>
  86.     <h4>Do you really want to delete?</h4>
  87.     <input type="button" value="close" onclick="closePopUp();">
  88.   </div>
  89. </div>
  90.  
  91. </BODY>
  92. </HTML>
  93.  
Thanks and Regards
Ramanan Kalirajan

Share this Question
Share on Google+
13 Replies


RamananKalirajan
100+
P: 607
Hi Ismail,

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

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <script type="text/javascript">
  10.  
  11. function showPopUp()
  12. {
  13.     document.getElementById('light').style.display='block';
  14.     document.getElementById('fade').style.display='block';
  15. }
  16.  
  17. function closePopUp()
  18. {
  19.     document.getElementById('light').style.display='none';
  20.     document.getElementById('fade').style.display='none';
  21. }
  22.  
  23. </script>
  24. <style type="text/css">
  25. /* LightBox */
  26. .black_overlay {
  27.     display: none;
  28.     position: absolute;
  29.     top: 0%;
  30.     left: 0%;
  31.     width: 100%;
  32.     height: 100%;
  33.     background-color:#000;
  34.     z-index:1001;
  35.     -moz-opacity: 0.2;
  36.     opacity:.20;
  37.     filter: alpha(opacity=20);
  38. }
  39. .white_content {
  40.     display:none;
  41.     position: absolute;
  42.     top:50%;
  43.     left:50%;
  44.     z-index:9999;
  45.     width:262px;
  46.     height:119px;
  47.     margin:-131px 0 0 -59px;
  48.     text-align:left;
  49.     background: #FFFFFF;
  50.     border: 1px solid #333333;
  51. }
  52. /* Window Settings */
  53. * {
  54.     margin:0px;
  55.     padding:0px;
  56. }
  57. .bgErrorMessage {
  58.     width:262px;
  59.     height:119px;
  60.     background:url(../images/log/bgErrorMessage.png) no-repeat left top;
  61.     position:relative;
  62. }
  63. </style>
  64. </HEAD>
  65.  
  66. <BODY>
  67. <a href="javascript:showPopUp();">Open Pop Up </a>
  68. <div id="light" class="white_content">
  69.   <div class="bgErrorMessage">
  70.     <h3>Confirm Message</h3>
  71.     <h4>Do you really want to delete?</h4>
  72.     <input type="button" value="close" onclick="closePopUp();">
  73.   </div>
  74. </div>
  75. <div id="fade" class="black_overlay"> </div>
  76. </BODY>
  77. </HTML>
  78.  
Thanks and Regards
Ramanan Kalirajan
Jan 22 '10 #2

100+
P: 200
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 :(

Expand|Select|Wrap|Line Numbers
  1. <div id="light" class="white_content">
  2.   <div class="bgErrorMessage">
  3.      <h3>Confirm Message</h3>
  4.       <h4>Do you really want to delete?</h4>
  5.  
  6.     <xsl:for-each select="Activity/ObjectGroup[@type='default']/Object">
  7.       <tr class="rowDetail">
  8.           <td colspan="8">
  9.     <xsl:call-template name="CreateObject">
  10.          <xsl:with-param name="Object" select="." />
  11.       </xsl:call-template>                
  12.           </td>
  13.       </tr>
  14.      </xsl:for-each>
  15.  
  16.   <input type="button" value="close" onclick="closePopUp();"></input>
  17.  </div>
  18. </div
  19.  
Jan 22 '10 #3

100+
P: 200
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
Jan 22 '10 #4

100+
P: 200
I got past thje second problem i had, filtered out the

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

Thank You

Expand|Select|Wrap|Line Numbers
  1. .black_overlay {
  2. /*background-color:#000;*/
  3.  
Jan 22 '10 #5

RamananKalirajan
100+
P: 607
Use some div's to have the alignment. I am not that much good at XLS.

Thanks and Regards
Ramanan Kalirajan
Jan 23 '10 #6

100+
P: 200
Hi, RamananKalirajan 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 :(
Jan 23 '10 #7

RamananKalirajan
100+
P: 607
Hi Ismailc,
I found out the problem of yours.... first Uncomment

Expand|Select|Wrap|Line Numbers
  1. # .black_overlay {
  2. # /*background-color:#000;*/
for the above CSS and add this styles in the page


Expand|Select|Wrap|Line Numbers
  1. html,body
  2. {
  3.     height: 100%;
  4.     width: 100%;
  5.     margin: 0px;
  6.     padding: 0px;
  7.     font-family: tahoma;
  8.     font-size: 11px;
  9.     overflow:hidden;
  10. }
Sorry for the late reply yaar...


Thanks and Regards
Ramanan Kalirajan
Jan 23 '10 #8

100+
P: 200
I cant seem to make the main window disabled?
I added the code but no luck :(
Jan 23 '10 #9

RamananKalirajan
100+
P: 607
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.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <script type="text/javascript">
  10.  
  11. function showPopUp()
  12. {
  13.     document.getElementById('light').style.display='block';
  14.     document.getElementById('fade').style.display='block';
  15. }
  16.  
  17. function closePopUp()
  18. {
  19.     document.getElementById('light').style.display='none';
  20.     document.getElementById('fade').style.display='none';
  21. }
  22.  
  23. </script>
  24. <style type="text/css">
  25.  
  26. html,body
  27. {
  28.     height: 100%;
  29.     width: 100%;
  30.     margin: 0px;
  31.     padding: 0px;
  32.     font-family: tahoma;
  33.     font-size: 11px;
  34.     overflow:hidden;
  35. }
  36.  
  37. /* LightBox */
  38. .black_overlay {
  39.     display: none;
  40.     position: absolute;
  41.     top: 0%;
  42.     left: 0%;
  43.     width: 100%;
  44.     height: 100%;
  45.     background-color:#000;
  46.     z-index:1001;
  47.     -moz-opacity: 0.2;
  48.     opacity:.20;
  49.     filter: alpha(opacity=20);
  50. }
  51. .white_content {
  52.     display:none;
  53.     position: absolute;
  54.     top:50%;
  55.     left:50%;
  56.     z-index:9999;
  57.     width:262px;
  58.     height:119px;
  59.     margin:-131px 0 0 -59px;
  60.     text-align:left;
  61.     background: #FFFFFF;
  62.     border: 1px solid #333333;
  63. }
  64. /* Window Settings */
  65. * {
  66.     margin:0px;
  67.     padding:0px;
  68. }
  69. .bgErrorMessage {
  70.     width:262px;
  71.     height:119px;
  72.     background:url(../images/log/bgErrorMessage.png) no-repeat left top;
  73.     position:relative;
  74. }
  75. </style>
  76. </HEAD>
  77.  
  78. <BODY>
  79. <a href="javascript:showPopUp();">Open Pop Up </a>
  80.  
  81. <!-- This content should be there in the bottom of your page -->
  82. <div id="fade" class="black_overlay"> </div>
  83. <div id="light" class="white_content">
  84.   <div class="bgErrorMessage">
  85.     <h3>Confirm Message</h3>
  86.     <h4>Do you really want to delete?</h4>
  87.     <input type="button" value="close" onclick="closePopUp();">
  88.   </div>
  89. </div>
  90.  
  91. </BODY>
  92. </HTML>
  93.  
Thanks and Regards
Ramanan Kalirajan
Jan 23 '10 #10

100+
P: 200
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
Jan 23 '10 #11

100+
P: 200
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.

???
Jan 23 '10 #12

100+
P: 200
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

Expand|Select|Wrap|Line Numbers
  1. html,body 
  2.     height: 100%; 
  3.     width: 100%; 
  4.     margin: 0px; 
  5.     padding: 0px; 
  6.     font-family: tahoma; 
  7.     font-size: 11px; 
  8.     overflow:hidden; 
  9.  
Jan 23 '10 #13

RamananKalirajan
100+
P: 607
Keep Moving Forward, Post back if you have any more queries...

Thanks and Regards
Ramanan Kalirajan
Jan 24 '10 #14

Post your reply

Sign in to post your reply or Sign up for a free account.