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.