<div id="dialog-confirm" role="dialog">
<div id="tabs">
<ul>
<li><a href="#tabs-1"></a></li>
<li><a href="#tabs-2"></a></li>
<li><a href="#tabs-3"></a></li>
<li><a href="#tabs-4"></a></li>
<li><a href="#tabs-5"></a></li>
</ul>
<div id="tabs-1">
<p>Let’s have some fun with dialogs!</p>
</div>
<div id="tabs-2">
<p>Yes! Cuz we love dialogs!</p>
</div>
<div id="tabs-3">
<p>Hey look! We’re moving through content in this dialog!</p>
</div>
<div id="tabs-4">
<p>No way, that’s sorcery, bro!</p>
</div>
<div id="tabs-5">
<p>Nope! It’s just a dialog!</p>
</div>
<div class="footer">
<button id="btn-close">Close</button><button id="btn-totally" onclick="TotallyAwesome();">Totally awesome!</button><button id="btn-next">Next</button>
</div>
</div>
</div>
body {
background-image: url("http://images.unsplash.com/photo-1448518184296-a22facb4446f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=5628d2e809c6bc15ffaf8d3ee2fd7f6e");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
/* dialog */
.ui-widget-overlay {
background: #000;
}
.ui-widget-content p,
.ui-widget button {
font-family: "Roboto", sans-serif;
}
.ui-widget-content {
border: none;
}
.ui-dialog {
-webkit-font-smoothing: antialiased;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0;
visibility: hidden;
}
.ui-dialog-content p {
font-size: 1.75em;
font-weight: 500;
text-rendering: optimizeLegibility;
}
.ui-widget-header .ui-state-default {
border: none;
background: #fff;
visibility: visible;
}
.ui-widget .ui-widget {
height: 100%;
overflow: hidden;
padding: 0;
}
.ui-widget button {
background: #2196f3;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 1.25em;
margin: 0 .5em 2.25em;
padding: .75em 1.25em;
}
.ui-widget button:first-child {
background: #999;
}
.ui-widget .green {
background: #4caf50;
}
/* tabs */
.ui-tabs .ui-tabs-nav {
display: none;
}
.ui-tabs .ui-tabs-panel {
padding: .25em 1.5em 1em;
}
.ui-tabs .footer {
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
$(function () {
$('#dialog-confirm')
// Dialog will slide down from top of document
.on('dialogopen', function () {
var widget = $(this).dialog('widget'),
offset = widget.offset();
widget
.css('top', -widget.outerWidth() + 'px')
.animate({ top: offset.top }, { duration: 150 });
})
.dialog({
resizable: false,
draggable: false,
height: 325,
width: 550,
modal: true
});
});
$('#dialog-confirm').on('click', '#btn-close', function () {
$(this).closest('#dialog-confirm').dialog('close');
});
$(function () {
$('#btn-close, #btn-totally').hide();
$('#btn-next').show();
// Get the first tab in document
var selectedTab = $(document).find('div[class^="ui-tabs"]').first();
// Navigation through tabs when button click
$('.footer').on('click', ':button', function () {
var selected = selectedTab.tabs('option', 'active');
selectedTab.tabs('option', 'active', selected + 1);
});
// Tab activated
selectedTab.tabs({
activate: function (event, ui) {
var active = selectedTab.tabs('option', 'active'),
selected = selectedTab.tabs('option', 'active');
if (selectedTab.find('li:not(li[style="display:none"])').size() - 1 === selected) {
$('#btn-next').hide();
$('#btn-close').show();
$('#btn-totally').show().addClass('green');
}
}
});
});
$('#tabs').tabs({
hide: {
effect: 'slide',
duration: 250
}
});
function TotallyAwesome() {
window.location.href = 'http://giphy.com/gifs/adventure-time-high-five-jake-the-dog-g0hFNupMHA74s';
}
