Toggling Hide and show within a modal dialog box with Javascript

Question

I'm trying to show a modal dialog that I created with css on the click of an anchor element, and hide it on click of another element within the dialog box.

I have tried finding reasons for why it doesn't work, but I cannot find it...I'm sure it's a very obvious reason that I should have caught..... I'd appreciate any help or advise.

JavaScript:

function show(target) {
    document.getElementById(target).style.visibility = 'block';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
}

HTML:

<a id="as" href="#" onclick="show('modalDialog')">Open Modal Box</a>

<div id="modalDialog">
    <div>   <a href="#" title="Close" class="close" onclick="hide('modalDialog')">X</a>

            <h2>Modalo Box</h2>

        <p>test</p>
    </div>
</div>

link to JsFiddle

I've rolled back your change - please don't "fix" problems in your question that will make the answers look wrong or nonsensical. — Amos M. Carpenter, Feb 25 '16 at 05:05
If your problem is that nothing happens at all in you jsfiddle demo, then your reason is that you use inline event handlers (`onclick="show('modalDialog')"`) the default behaviour of jsfiddle is that wraps your code into a function, as of that `function show(target)` and `function hide(target)` are not in the global scope and are not reachable using inline event handlers. [Inline event handler not working in JSFiddle](http://stackoverflow.com/questions/5431351), thats one of the reasons why you should not use inline event handlers. — t.niese, Feb 25 '16 at 05:11
The question itself is a possible duplicate of [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone), but the reason In the fiddle might be more [Inline event handler not working in JSFiddle](http://stackoverflow.com/questions/5431351/inline-event-handler-not-working-in-jsfiddle) — t.niese, Feb 25 '16 at 05:17

score 1 · Answer 1 · answered Feb 24 '16 at 20:31

1

Try to use,

document.getElementById(target).style.display = 'block';

instead of

document.getElementById(target).style.visibility = 'block';

Since visibility does not have a property value called block

DEMO

answered Feb 24 '16 at 20:31

Rajaprabhu Aravindasamy

66,513
17
101
130

Whoops, good catch. It doesn't fix it, but I've updated my code. What fixed it was hanging it from 'onload' within jsfiddle to 'no wrap in head. ' Any idea why that is? – Silverstaryu Feb 24 '16 at 20:34
@Silverstaryu :\ Did you try the demo? – Rajaprabhu Aravindasamy Feb 24 '16 at 20:35
@Silverstaryu internal scripts needs to be written in head only. If you do not do that, then the event handlers will not be available while rendering the respective element. – Rajaprabhu Aravindasamy Feb 24 '16 at 20:39
please fix demo link it is showing 404 – vikramvi Sep 15 '22 at 02:03

score 0 · Answer 2 · answered Feb 24 '16 at 20:33

0

change the css attribute visibility to display.

answered Feb 24 '16 at 20:33

mightyheptagon

170
2
7

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). - [From Review](/review/low-quality-posts/11395025) – dingo_d Feb 25 '16 at 06:47
My reply is **obviously** an answer to the question. Just because it lacks of a code example to illustrate the usage doesn't mean it is irrelevant. – mightyheptagon Feb 25 '16 at 14:26
It came up in a review, and because it's just one line without any further explanation, or description what it does, it was automatically put in the low quality posts. Technically it's not a valid answer. This should be a comment. The message you've seen above was placed here automatically as a part of a review. – dingo_d Feb 25 '16 at 16:33

score 0 · Answer 3 · answered Feb 24 '16 at 20:35

These are the correct CSS properties:

- Visibility: hidden or visible
- Display: block or none

So your code will look like this:

function show(target) {
    document.getElementById(target).style.display = 'block';
    //or document.getElementById(target).style.visiblity = 'visible';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
    //or document.getElementById(target).style.visibility = 'hidden';
}

Toggling Hide and show within a modal dialog box with Javascript

3 Answers3

DEMO