Solved

CSS display:none AND display:block on same element

Posted on 2016-09-07
3
142 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

617 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