Solved

CSS display:none AND display:block on same element

Posted on 2016-09-07
3
123 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

751 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