Jump to content

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


Nrodgers1987

Recommended Posts

Nrodgers1987

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...