• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 198
  • Last Modified:

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 Hess
Patrick Hess
1 Solution
RobOwner (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>
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.
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.
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.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now