jQuery UI Dialog with Bootstrap Tours - TOURS

by bizamajig

HTML

<script src="http://bootstraptour.com/assets/js/bootstrap-tour.js"></script>
<link rel="stylesheet" href="http://bootstraptour.com/assets/css/bootstrap-tour.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div id="dialog">
    <div id="content">
        Hello, World!
    </div>
</div>

CSS

.tour-step-background, 
.tour-backdrop {
    position: fixed;
}

JavaScript

$("#dialog").dialog({stack:true});

var t = new Tour({
    backdrop: true,
    onShown: function(tour) {
        var stepElement = getTourElement(tour);
        $(stepElement).after($('.tour-step-background'));
        $(stepElement).after($('.tour-backdrop'));
    }
});

t.addStep({
    element: "#content",
    title: "Title",
    content: "Content"
});

t.restart();


function getTourElement(tour){
    return tour._steps[tour._current].element
}