Web Client Slide Out Menu / Adding a Link to open a modal

December 8, 2015

I have a custom modal i want to add the the web server which gets called via an "A href" tag. I want to add that "A href" tag to the slide out menu that the client uses.

The CSS:

    .black_overlay{
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.9;
        opacity:.90;
        filter: alpha(opacity=90);
    }
    .white_content {
        display: none;
        position: fixed;
    top:50%;
    left:50%;
    margin-top:-160px;
    ;
        width: 135px;
        height: 304px;
        padding: 10px;
        border: 5px solid black;
    border-radius: 10px;
        background-color: black;
        z-index:1002;
        overflow: hidden;
    }
.mywebapp {
    position:fixed;
    border:solid;
    border-color:transparent;
    borser-size:0;
    height:300px;
    width:150px;
}

.close {
    position:relative;
    z-index:1003;
    top:4px;
    left:107px;

}

.closefont{
        text-decoration: none;
    color:#ffffff;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

}

The HTML:

<body>
    <div>Emby content. <br>

<!-- This is the Line i want to add to the Slide out menu --><a href = "javascript:void(0)" onclick = "document.getElementById('webappwindow').style.display='block';document.getElementById('webappbg').style.display='block'">click here</a></div>



<!-- The code below only shows when the modal window pops up, so it is not needed in the slide out menu, but does need added at the end of the page -->
<div id="webappwindow" class="white_content"><div><iframe class="mywebapp" src="webapp.html"></iframe></div><div class="close">
 <a href = "javascript:void(0)" onclick = "document.getElementById('webappwindow').style.display='none';document.getElementById('webappbg').style.display='none'"><font class="closefont">X</font></a>


</div></div>
    <div id="webappbg" class="black_overlay"></div>
</body>

this is just an example of the modal and the code. (files are Linked)

Is there a way to add this code in and have it work?

Thank You in Advanced!

webapp.zip

Sign In

Web Client Slide Out Menu / Adding a Link to open a modal

Recommended Posts

Nrodgers1987 0

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Activity