Solved

CSS display:none AND display:block on same element

Posted on 2016-09-07
3
109 Views
Last Modified: 2016-09-08
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
0
Comment
Question by:Patrick Hess
3 Comments
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 41788961
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41789013
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
 

Author Closing Comment

by:Patrick Hess
ID: 41790050
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question