0

Uber iFrame Widgets (Zendesk Classic)

Want to create an iframe widget to another site, but there isn't enough screen real-estate?  Try this.

Add the following code to a CSS widget

 

.lightbox {
display:none;
}
.lightbox:target {
display:inline;
}
.lightbox .overlay {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:black none repeat scroll 0 0;
display:block;
height:100%;
left:0;
opacity:0.6;
position:fixed;
top:0;
width:100%;
z-index:100;
}
.lightbox .content-frame {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#484848 url(images/loading.gif) no-repeat scroll center center;
border:5px solid white;
position:fixed;
z-index:200;
}
.lightbox .content-frame.text {
height:80%;
left:10%;
top:10%;
width:80%;
}

.lightbox .controls {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-left:5px solid white;
border-right:5px solid white;
height:22px;
margin:0 -5px;
position:relative;
}
.lightbox .controls.top {
bottom:22px;
}
.lightbox .controls.bottom {
margin-top:-5px;
top:5px;
}
.lightbox .controls.top + .content {
bottom:22px;
position:relative;
}
.lightbox .close-lightbox {
float:right;
margin-left:10px;
font-weight: bold;
text-transform: uppercase;
line-height: 22px;
}
div#container .lightbox .content {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#484848 none repeat scroll 0 0;
color:white;
padding:0;
}
.lightbox .content.image {
height:100%;
width:100%;
}
.lightbox .content-frame.text .content {
height:100%;
width:100%;
}

 

 

Then create a custom widget as follows

 

<p id="showmyiframelink">
    <a href="#showmyiframe">Show My iframe</a>
</p>

<div id="showmyiframe" class="lightbox">
    <div class="overlay"></div>
    <div class="content-frame text">
        <div class="controls top">
            <a class="close-lightbox" href="#showmyiframelink">Close</a>
        </div>
        <div class="content">
            <iframe style="width:100%; height: 100%; border:none;" src="http://www.uber.com">
                <p>Your browser does not support iframes.</p>
            </iframe>
        </div>
    </div>
</div>

 

 

Enjoy!

22 comments

Please sign in to leave a comment.