jQuery UI Dialog with Bootstrap Tours

by manoj

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>



















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='How do I get Bootstrap Tour to work with a jQuery dialog?'>Bootstrap 3 class visible-lg moves span to a new line</a><br/>                
    About this Issue in GitHub <a href='https://github.com/sorich87/bootstrap-tour/issues/166'>#166 Dialog element being hidden by the backdrop </a><br/>
<div>

CSS

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

.tour-step-background {
    background: #fff;
}

JavaScript

$("#dialog").dialog();

var t = new Tour({
    backdrop: true,
    onShown: function(tour) {
        var stepElement = getTourElement(tour);
        $(stepElement).after($('.tour-step-background'));
        $(stepElement).after($('.tour-backdrop'));
    },
    steps: [
        {
            element: "#content",
            title: "Title",
            content: "Content"
        }        
    ]
}).restart();


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