我正在尝试突出显示表格行。 即使有z-index等的bootstrap-tour修复程序github issue link
看看这个小提琴:jsFiddle
$("#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: "table tbody tr:first-of-type",
title: "Title",
placement: 'bottom',
content: "Content"
}
]
}).restart();
function getTourElement(tour){
return tour._options.steps[tour._current].element
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Power</th>
<th>Health</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>Flying</td>
<td>100%</td>
</tr>
<tr>
<td>Superman</td>
<td>Flying</td>
<td>100%</td>
</tr>
<tr>
<td>Superman</td>
<td>Flying</td>
<td>100%</td>
</tr>
</tbody>
</table>
table{
width:100%;
}
.tour-step-background,
.tour-backdrop {
position: fixed;
}
.tour-step-background {
background: #fff;
}
正如您所看到的,只有当您将其css更改为:display:block;
时,它才会显示(表格行“tr”)
但它会失去它的风格。
答案 0 :(得分:1)
您可以通过添加规则来解决此问题
.tour-step-backdrop>td
{
position: relative;
z-index: 1101;
}