Making a div appear when link is clicked

Question

I have been working on an unordered list that acts like a family tree and I want to be able to click each section so that a new div appears in the center of the screen with that persons relevant details on. Then preferably be able to close the link by clicking out of it.

I've looked at some jQuery solutions but nothing seems to be just right for what I'm looking for.

Here's what I've got so far:

Fiddle

HTML:

<div class="tree">
    <ul>
        <li>
            <a href="chairman"><span class="accent">Chairman / Owner</span></a>

            <p>Name</p>

            <ul>
                <li>
                    <a href="financemanager"><span class="accent">Finance &<br>
                    Managing Director</span><span>Name</span></a>

                    <ul>
                        <li><a href="financeteam"><span class="accent">Finance
                        Team</span> <span>Name</span><br></a></li>

                        <li><a href="salesdirector"><span class="accent">Sales
                        Director</span><span>Name</span></a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS:

body {
    width:100%;
}

* {margin: 0; padding: 0;}

ul {
    line-height:20px;
}

.tree ul {
    padding-top: 20px; position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 0px 0 0;
    -webkit-border-radius: 0 0px 0 0;
    -moz-border-radius: 0 0px 0 0;
}

.tree li:first-child::after{
    border-radius: 0px 0 0 0;
    -webkit-border-radius: 0px 0 0 0;
    -moz-border-radius: 0px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 13px;
    display: inline-block;

    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #E9E9E9; color: black; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:#06C;
}

span.accent{
    background-color: #113963;
    display: block;
    margin: -5px -10px 5px;
    padding: 5px;
    color: white;
    font-weight:bold;
}

@mArm.ch trying to format the lists properly confused the hell out of me! — SaturnsEye, Jan 27 '14 at 11:56
You can use model popups by jqueryUi or bootstrap or some other front end frame wroks. — Arun Chandran Chackachattil, Jan 27 '14 at 11:57
maybe this link is useful for you http://stackoverflow.com/questions/19064987/html-css-popup-div-on-text-click/19065024#19065024 — Karuppiah RK, Jan 27 '14 at 11:58
@Beginner this looks like the sort of thing I'm after, I'll have a play about with that, thanks! — SaturnsEye, Jan 27 '14 at 12:03
Modal box - css solution http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/ — daniel__, Jan 27 '14 at 12:04

score 0 · Answer 1 · answered Jan 27 '14 at 12:08

It's incredibly easy using some semi-basic javascript.

Essentially, what you need to do is when the viewer clicks on a name in the list, using onClick, you call a javascript function that makes the popup. I, personally (because I'm lazy to look into other methods), would add some CSS for a class, let's call it .popup, and then using innerHTMl, generate some HTML with that specific class. The .popup would have css that would center it and make it float above everything. Using javascript (or better, jQuery) to detect a click anywhere while that was opened would close it.

If you want a really basic worked example (maybe you're confused because I'm terrible at explaining things), then say so, but otherwise this should be enough info for you to do it yourself (you learn better by trying)

Making a div appear when link is clicked

1 Answers1