472,109 Members | 1,808 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > html / css > questions > popup window doesn't display

Join Bytes to post your question to a community of 472,109 software developers and data experts.

Popup Window doesn't display

Hello,
I have 2 problems. In my webpage, I have a dropdown list with a button that takes the user to a popup window specific to the option. I am using Firefox 2.0.0.13. I have successfully validated my HTML and CSS code.

1. When I clear cache and refresh my webpage, it takes 3 tries before the popup window displays - I click on the button once, a white window the size of my webpage displays. I close it and click on the button again (for the same option) and a white window the size of my webpage displays again. Close that window and click the button again (for the same option) and a white window initially displays, then goes away and the normal sized popup window displays correctly. I can then close the popup and choose any other option and get the popup with the first try. Once I clear cache though, it starts over again.

2. Once the popup window is displaying, it initially displays as a white page the same size as the webpage, then when it connects to the URL the white page goes away and the normal sized popup window displays.

I'm looking for 1. the popup window to display the first time I click on the submit button whether I've cleared cache or not, and 2. the initial, extra white page to not display.

Thank you for any help you might offer.


HTML
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.         "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.      <title>Company</title>
  6.       <meta http-equiv="Content-Type"
  7.          content="text/html; charset=utf-8">
  8.       <link href="style.css" rel="stylesheet" type="text/css" >
  9.       <link rel='SHORTCUT ICON'
  10.          href='../images/favicon.ico'>
  11.       <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
  12.       <script type="text/javascript">
  13.          _uacct = "UA-12134";
  14.          urchinTracker();
  15.       </script>
  16.   </head>
  17.   <body id="support">
  18.        <div id="bodyWrapper"> <!-- center page on viewport -->
  19.             <div id="navright_container">
  20.                  <script type="text/javascript" src="topmenu.js"></script>
  21.             </div><!-- navright_container -->
  22.             <div style="clear:both;"></div>
  23.             <div id="topBorder">
  24.                  <img style="float:left;width:99%;" src="images/heading915x135.png" alt="Banner">
  25.                  <div style="clear:both;"></div>
  26.                  <div id="navbar_container">
  27.                       <div id="navbar">
  28.                            <script type="text/javascript" src="menu.js"></script><!-- menu -->
  29.                       </div>
  30.                  </div>
  31.                  <div style="clear:both;"></div>
  32.             </div><!-- topborder -->
  33.             <div class="leftpanel" style="height:26em;border:0;">
  34.             </div>
  35.             <div class="middleContainer">
  36.                  <div class="center">
  37.                       <h2 class="no_marg_pad" style="margin-bottom: 1em;">Support</h2>
  38.                  </div><!-- center -->
  39.                  We offer live support Monday through Friday, 7:00am - 5:00pm 
  40.                  <div style="margin-top:2em;float:left;">
  41.                       Choose the type of support needed:
  42.                            <script type="text/javascript">
  43.                            function supportWindow(URL)
  44.                            {
  45.                              window.open(URL+"&refURL="+escape(document.location),'popupwindow','scrollbars,resizable');
  46.                              return false;
  47.                            }
  48.                            </script>
  49.                            <p>
  50.                               <select id="sel" size="1">
  51.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18427&amp;UID=0&amp;SK=9numbercodese">Support1</option>
  52.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18442&amp;UID=0&amp;SK=fnumbercodes3">Support2</option>
  53.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18407&amp;UID=0&amp;SK=5numbercodes1">Support3</option>
  54.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18452&amp;UID=0&amp;SK=6numbercodese">Support4</option>
  55.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18457&amp;UID=0&amp;SK=6numbercodes9">Support5</option>
  56.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18447&amp;UID=0&amp;SK=fnumbercodes4">Support6</option>
  57.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18417&amp;UID=0&amp;SK=6numbercodes0">Support7</option>
  58.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18437&amp;UID=0&amp;SK=9numbercodes5">Support8</option>
  59.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18422&amp;UID=0&amp;SK=enumbercodesc">Support9</option>
  60.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=18432&amp;UID=0&amp;SK=5numbercodes1">Support10</option>
  61.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19612&amp;UID=0&amp;SK=dnumbercodes3">Support11</option>
  62.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19607&amp;UID=0&amp;SK=5numbercodesf">Support12</option>
  63.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19617&amp;UID=0&amp;SK=7numbercodes7">Support13</option>
  64.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19907&amp;UID=0&amp;SK=bnumbercodes6">Support14</option>
  65.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=19912&amp;UID=0&amp;SK=enumbercodesf">Support15</option>
  66.                                  <option value="https://company.webex.com/u2logic/webacd.wbx?AT=pqform&amp;QID=20212&amp;UID=0&amp;SK=9numbercodesc">Support16</option>
  67.                               </select>                   
  68.                               <input type="button" value="Submit" onclick="supportWindow(document.getElementById('sel').value)">
  69.                            </p>
  70.                  </div>
  71.             </div><!-- middle container -->
  72.             <div style="clear:both;"></div>
  73.             <script type="text/javascript" src="footer.js"></script><!-- footer address -->
  74.        </div><!-- bodyWrapper -->
  75.   </body>
  76. </html>
  77.  
CSS
Expand|Select|Wrap|Line Numbers
  1. html {
  2.      /* commented backslash hack \*/
  3.      height:100%;
  4.      /* end hack */
  5.      margin:0;
  6.      padding:0;
  7. }
  8. body {
  9.      /* commented backslash hack \*/
  10.      height:100%;
  11.      /* end hack */
  12.      min-height:100%;
  13.      text-align:center;
  14.      min-width:80%;
  15.      margin:0;
  16.      padding:0;
  17.      background:#406580;
  18.      background:#115681;
  19. }
  20. body#downloads a#downloads_link,
  21. body#index a#index_link,
  22. body#services a#services_link,
  23. body#cases a#cases_link,
  24. body#employment a#employment_link,
  25. body#about a#about_link,
  26. body#contact a#contact_link,
  27. body#support a#support_link,
  28. body#webdocs a#webdocs_link,
  29. body#webcrm a#webcrm_link {
  30.      text-decoration:none;
  31.      color:white;
  32.      font-weight:bold;
  33.      background-color: #2175B5;
  34.      margin:0;
  35.      padding:0 .5em 0 .5em;
  36. }
  37. #bodyWrapper {
  38.      position:relative;
  39.      background-color:white;
  40.      margin-right:auto; /* center */
  41.      margin-left:auto;  /* center */
  42.      padding:0;
  43.      width:59.1em;
  44.      padding-bottom:1px;
  45.      text-align:left;
  46.      font-family:Helvetica, Arial, Verdana, sans-serif;
  47. /*     border:1px solid black; */
  48. }
  49. /* img.logo and .tagline height, margins, padding, font size, and maybe bold work together.
  50.    If change one, will have to adjust others.  */
  51. img.logo {
  52.      width:29.6%;
  53.      float:left;
  54.      margin:0 0 0 4%;
  55.      padding:1% 0 1% 0
  56. }    
  57. .tagline {
  58.      float:right;
  59.      height:75px;
  60.      width:60%;
  61.      color:white;
  62.      font-family:Helvetica, Arial, Verdana, sans-serif;
  63.      font-weight:bold;
  64.      font-size:1.5em;
  65.      text-align:center;
  66.      padding:4% 0 0 0;
  67.  /*    background-image: url(images/TagBackground630x120.png)
  68. */
  69. }
  70. .center {
  71.      text-align:center;
  72. }
  73. .leftpanel {
  74.      float:left;
  75.      margin:.5% 0 0 .25%;
  76.      width:20%;
  77.      border:#C9CFD1 1px solid;
  78.      border-top:0;
  79. }
  80. .sampleApp {
  81.      float:left;
  82.      width:95%;
  83.      padding:0;
  84.      margin:2% 0 0 2%;
  85. }
  86. .dividerBar {
  87.      background-color:#C9CFD1;
  88.      height:1px;
  89.      margin-top:2%;
  90.      margin-bottom:2%;
  91.      padding:0;
  92. }
  93. .webEase {
  94.      float:left;
  95.      width:95%;
  96.      margin:2% 0 0 2%;
  97. }
  98. .topleft {
  99. /*     background-color:#CEDFEF;
  100. */
  101. }
  102. .bottomleft {
  103. /*     background-color:#FFE3C6;
  104. */
  105. }
  106. .sidetext {
  107.      margin:1% 1% 0 3%;
  108.      font-size:.75em;
  109. }
  110. .mainContainer {
  111.      float:left;
  112.      width:100%;
  113.      margin:3% 0 1% 9%;
  114.      font-family:Helvetica, Arial, Verdana, sans-serif;
  115. }
  116. .middleContainer {
  117.      float:left;
  118.      width:60%;
  119.      margin:3% 0 1% 9%;
  120.      font-family:Helvetica, Arial, Verdana, sans-serif;
  121. }     
  122. .no_marg_pad {
  123.      margin:0;
  124.      padding:0;
  125. }     
  126. .pt75em {
  127.      font-size:.75em;
  128. }
  129. .introText {
  130.      float:left;
  131.      margin:0 0 .25% 0;
  132.      padding:0;
  133.      font-size:.8em;
  134.      font-family:Helvetica, Arial, Verdana, sans-serif;
  135.      font-weight:bold;
  136. }
  137.  
  138. table {
  139.      border-collapse:collapse;
  140.      margin:1em 0 0 5em;
  141. }
  142. td { 
  143. /*     border:1px solid silver; */
  144.      font-size:.9em;
  145. }
  146. /* th { border:1px solid silver; } */
  147.  
  148.  
  149.  
  150. /* Code to build header picture.  Example to use for future page.
  151. <br />
  152. <img class="logo" src="images/logo.png" alt="logo" />
  153. <div class="head_frame" style="border:#339966 1em solid;"></div>
  154. <img style="position:relative;left:20em;top:-13em;" src="images/Company.png" alt="About Us" />
  155. <div style="height:180px; position:relative;top:-24.5em;left:46.8em;width:11.4em;background:#339966;filter:alpha(opacity=60);
  156. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);-moz-opacity:0.60;opacity:0.6;" />
  157. */
  158. .category_hdg {
  159.      font-weight:bold;
  160.      font-size:.9em;
  161.      color:white;
  162.      padding:3% 0 3% 0;
  163.      text-align:center;
  164.      border-bottom:black 2px solid;
  165. }
  166. .saas_category_hdg {
  167.      font-weight:bold;
  168.      font-size:.9em;
  169.      color:white;
  170.      padding:1% 0 1% 0;
  171.      text-align:center;
  172.      border-bottom:black 2px solid;
  173. }
  174. .product_txt {
  175.      font-size:.75em;
  176. }
  177. .txt80 {
  178.      font-size:.80em;
  179.      margin:2% 4% 0 4%;
  180. }
  181. .product_txt ul {
  182.      margin:2% 0 0 11%;
  183.      padding:0;
  184.      font-size:.955em;
  185. }
  186. .product_txt80 {
  187.      font-size:.80em;
  188. }
  189. .product_txt80 ul{
  190.      margin:4% 0 0 13%;
  191.      padding:0;
  192. }
  193. .product_txt90 li{
  194.      margin:2% 0 0 0;
  195. }
  196. .product_txt90 a {
  197.      color:black;
  198. }
  199. #footer {
  200.      position:relative;
  201.      top:1px;left:0;
  202.      width:100%;
  203.      text-align:center;
  204.      background:#3D93CA;
  205.      background:#013654;
  206.      color:white;
  207.      font-size:10pt;
  208.      border-top:1px solid black;
  209.      border-bottom:1px solid black;
  210.      margin:0 0 0 -1px;
  211.      padding:0 2px 2px 0;
  212. }
  213. /* Right Menu */
  214. #navright_container {
  215.      width:100%;
  216.      float:right;
  217.      background-color:#013654;
  218.      border-top:1px solid black;
  219.      border-bottom:1px solid black;
  220.      color:white;
  221. }
  222. #navright {
  223.      margin:0;
  224.      padding:0;
  225. }
  226. #navright ul {
  227.      float:right;
  228.      margin:0;
  229.      padding:0;
  230. }
  231. #navright ul li {
  232.      display: inline;
  233. }
  234. #navright a {
  235.      float:right;
  236.      border-left: 1px white solid;
  237.      text-decoration:none;
  238.      font-weight:bold;
  239.      font-size:.75em;
  240.      color: white;
  241.      padding:0 .5em 0 .5em;
  242.      margin:0;
  243. }
  244. #navright a:hover {
  245.      color: #234163;
  246.      background: #BDDFF7;
  247.      text-decoration:none;
  248.      font-weight:bold;
  249. }
  250. /* Menu */
  251. #navbar_container {
  252.      width:100%;
  253.      float:left;
  254.      border-top:1px solid black;
  255.      border-bottom:1px solid black;
  256.      background-color:#013654;
  257. }
  258. #navbar {
  259.      margin:0;
  260.      padding:0;
  261. }
  262. #navbar ul {
  263.      float:left;
  264. }
  265. #navbar ul li {
  266.      display: inline;
  267. }
  268. #navbar a {
  269.      float:left;
  270.      border-right: 1px white solid;
  271.      text-decoration:none;
  272.      font-weight:bold;
  273.      font-size:.75em;
  274.      color: white;
  275.      padding:0 .5em 0 .5em;
  276.      margin:0;
  277. }
  278. #navbar a:hover {
  279.      color:#013654;
  280.      background:#BDDFF7;
  281.      text-decoration:none;
  282.      font-weight:bold;
  283. }
  284. .leftBackground {
  285.      float:left;
  286.      width:100%;
  287.      height:33px;
  288.      margin:0;
  289.      padding:0;
  290.      background-repeat:no-repeat;
  291. }
  292. .leftTitles {
  293.      float:left;
  294.      width:100%;
  295.      margin:.6em 0 0 0;
  296.      text-align:center;
  297.      font-size:.90em;
  298.      font-weight:bold;
  299. }
  300. /* Blue Rounded Corners */
  301. .raised {background: transparent; width:400px;}
  302. .raised .ab1, .raised .ab2, .raised .ab3, .raised .ab4, .raised .ab1b, .raised .ab2b, .raised .ab3b, .raised .ab4b {display:block; overflow:hidden; font-size:1px;}
  303. .raised .ab1, .raised .ab2, .raised .ab3, .raised .ab1b, .raised .ab2b, .raised .ab3b {height:1px;}
  304. .raised .ab2 {background:#2175B5; border-left:1px solid #fff; border-right:1px solid #eee;}
  305. .raised .ab3 {background:#2175B5; border-left:1px solid #fff; border-right:1px solid #ddd;}
  306. .raised .ab4 {background:#2175B5; border-left:1px solid #fff; border-right:1px solid #aaa;}
  307. .raised .ab4b {background:#BDDFF7; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  308. .raised .ab3b {background:#BDDFF7; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  309. .raised .ab2b {background:#BDDFF7; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  310. .raised .ab1 {margin:0 5px; background:#fff;}
  311. .raised .ab2, .raised .ab2b {margin:0 3px; border-width:0 2px;}
  312. .raised .ab3, .raised .ab3b {margin:0 2px;}
  313. .raised .ab4, .raised .ab4b {height:2px; margin:0 1px;}
  314. .raised .ab1b {margin:0 5px; background:#999;}
  315. .raised .aboxcontent {display:block; background:#BDDFF7; border-left:1px solid #fff; border-right:1px solid #999;} 
  316. /* End Blue Rounded Corners */
  317. /* Green Rounded Corners */
  318. .raised {background: transparent; width:400px;}
  319. .raised .cb1, .raised .cb2, .raised .cb3, .raised .cb4, .raised .cb1b, .raised .cb2b, .raised .cb3b, .raised .cb4b {display:block; overflow:hidden; font-size:1px;}
  320. .raised .cb1, .raised .cb2, .raised .cb3, .raised .cb1b, .raised .cb2b, .raised .cb3b {height:1px;}
  321. .raised .cb2 {background:#18BA63; border-left:1px solid #fff; border-right:1px solid #eee;}
  322. .raised .cb3 {background:#18BA63; border-left:1px solid #fff; border-right:1px solid #ddd;}
  323. .raised .cb4 {background:#18BA63; border-left:1px solid #fff; border-right:1px solid #aaa;}
  324. .raised .cb4b {background:#BDF7D6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  325. .raised .cb3b {background:#BDF7D6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  326. .raised .cb2b {background:#BDF7D6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  327. .raised .cb1 {margin:0 5px; background:#fff;}
  328. .raised .cb2, .raised .cb2b {margin:0 3px; border-width:0 2px;}
  329. .raised .cb3, .raised .cb3b {margin:0 2px;}
  330. .raised .cb4, .raised .cb4b {height:2px; margin:0 1px;}
  331. .raised .cb1b {margin:0 5px; background:#999;}
  332. .raised .cboxcontent {display:block; background:#BDF7D6; border-left:1px solid #fff; border-right:1px solid #999;} 
  333. /* End Green Rounded Corners */
  334. /* Orange Rounded Corners */
  335. .raised {background: transparent; width:400px;}
  336. .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
  337. .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
  338. .raised .b2 {background:#DE7129; border-left:1px solid #fff; border-right:1px solid #eee;}
  339. .raised .b3 {background:#DE7129; border-left:1px solid #fff; border-right:1px solid #ddd;}
  340. .raised .b4 {background:#DE7129; border-left:1px solid #fff; border-right:1px solid #aaa;}
  341. .raised .b4b {background:#FFD7C6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  342. .raised .b3b {background:#FFD7C6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  343. .raised .b2b {background:#FFD7C6; border-left:1px solid #FFE6CC; border-right:1px solid #999;}
  344. .raised .b1 {margin:0 5px; background:#fff;}
  345. .raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
  346. .raised .b3, .raised .b3b {margin:0 2px;}
  347. .raised .b4, .raised .b4b {height:2px; margin:0 1px;}
  348. .raised .b1b {margin:0 5px; background:#999;}
  349. .raised .boxcontent {display:block;background:#FFD7C6; border-left:1px solid #fff; border-right:1px solid #999;} 
  350. /* End Orange Rounded Corners */
  351.  
Apr 9 '08 #1
2 3016
drhowarddrfine
7,435 Expert 4TB
I can only think this is a javascript problem and not html or css.
Apr 9 '08 #2
Thank you for your reply and taking a look. I posted it on the JavaScript forum.
Apr 9 '08 #3

Post your reply

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

Similar topics
Hi, stupid popup question
38 posts views Thread by Shaun McKinnon | last post: by
Possible to change popup attribute from within?
2 posts views Thread by Mark Findlay | last post: by
popup with display
10 posts views Thread by Oliver | last post: by
HOW: Center this popup message on screen.
1 post views Thread by Blue® | last post: by
pass url to a popup
6 posts views Thread by Ellie | last post: by
Vertikale Scrollbar in Popup (IE)
4 posts views Thread by Richard | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates