Блог

Главная - Вопросы по программированию - Bootstrap-tour не будет работать со строкой таблицы

Bootstrap-tour не будет работать со строкой таблицы

#javascript #css #twitter-bootstrap #z-index #bootstrap-tour

#javascript #css #twitter-bootstrap #z-индекс #bootstrap-tour

Вопрос:

Я пытаюсь выделить строку таблицы. Даже с этим исправлением bootstrap-tour для z-индексов и т. Д. Ссылка на проблему github

Взгляните на эту скрипку: jsFiddle

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: "table tbody tr:first-of-type",
        title: "Title",
        placement: 'bottom',
        content: "Content"
    }        
]
}).restart();


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

HTML

 <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>

CSS

 table{
    width:100%;
}
.tour-step-background, 
.tour-backdrop {
    position: fixed;
}

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

Как вы можете видеть, он не будет отображать (строку таблицы «tr»), только если вы измените его css на: display:block;
Но тогда он потеряет свой стиль.

Комментарии:

1. Вы можете решить эту проблему, добавив ‘background: inherit; position: relative; z-index: 1101;’ on ‘.tour-step-background> td’, как показано в jsfiddle.net/DYNbj/24 . На демонстрационной странице bootstrap-tour показан фон, работающий с таблицей, но по какой-то причине он не работает только с tr.

2. Это решение проблемы. Почему бы вам не указать это в качестве ответа! Спасибо!

3. Хорошо, я пошел дальше и добавил его, но, возможно, кто-то еще может вмешаться с объяснением того, почему td не наследует эти правила от tr и table в этом случае.

Ответ №1:

Вы можете решить эту проблему, добавив правило

 .tour-step-backdrop>td
{
  position: relative;
  z-index: 1101;
}

как видно из http://jsfiddle.net/DYNbj/24 /