CSS display:none AND display:block on same element

I have a simple onclick event attached to an image. The goal is to have the onclick event center a popup DIV over the entire VIEWPORT and not be relative to the parent div. The only way I have found to achieve this is to make the position:fixed and the popup div with display:block so that it centers itself in the viewport no matter where the scroll of the screen is located. Initially, it would only popup in the parent div and be out of view at the bottom of my screen. Now with the display:block and position:fixed, it does exactly what I want when clicking on the image. However, when I LOAD the page, the popup DIV is displaying and I have to CLOSE it in order for the page to look normal. I want the POPUP DIV hidden until I click the image, but the result of centered in the entire viewport as it does now when I first close the popup when the page loads.

here is the URL: http://day6management.com/index.cfm
Patrick HessAsked:
Who is Participating?
 
RobConnect With a Mentor Owner (Aidellio)Commented:
Apologies if I'm missing something but why wouldn't you just have display: none initially set on the popup?

<div id="spencer" class="roster" style="display: none;">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('spencer').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I agree with Rob Jurd about setting the div to display: none; initially. But I would change the style definition for the roster class on line 48 of your d6m.css style sheet to display: none; Leave your HTML as is, just change the css file.
0
 
Patrick HessAuthor Commented:
I didn't realize you could have in INLINE style AND CSS SHEET style with the same property. It now does what I wanted where it initially hides the DIV on page load, but displays the DIV popup when clicking the image and it displays as a BLOCK element centered in the viewport. Thank you. I am still learning CSS and knew the rule about inline styles taking priority over style sheet in order, but didn't realize the style sheet would override the inline style afterward. Interesting reality.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.