Стиль Intro.js не отображается должным образом

Мы используем intro.js для реализации приложения. В перерывах между турне я выделяя bootstrap modal но элементы не появляются, как вы можете видеть на следующем рис:Стиль Intro.js не отображается должным образом

enter image description here

Это происходит только modal, это работает отлично, когда я пытаюсь выделить другие элементы, как и в следующий фильм:

enter image description here

Может кто-нибудь мне помочь? Благодарю.

источник

2014-08-22 vasan

Посмотрите на источник этой демонстрации, возможно, вам придется отрегулировать некоторые вещи, чтобы сделать работу intro.js с модальностями начальной загрузки (или любыми «позициями: абсолютными» элементами): https: // github. com/kourosh23/introjs-with-Bootstrap-Modal – GNi33

Извините за эту проблему, я исправлю ее в ближайшие несколько дней и выпущу новую версию. –

Можете ли вы мне предложить, я попробую, потому что мы уже внедрили в моем приложении сегодня его производство. так что вы можете мне помочь. – vasan

Я установил его с добавлением это мой CSS, и переместил все модальные элементы в конце<body>, а не в какой-либо дочерний элемент, или же все вы получите странное позиционирование.

.introjs-fixParent.modal, 
.introjs-fixParent.modal-dialog { 
    position: relative !important; 
}

Fixed мои модальности с этим:

$(document).ready(function(){ 
    $('div.modal').appendTo('body'); 
});

Проверено на версии 1.1.1 intro.js

источник

2016-07-29 14:52:32 Daantje

IntroJs и DOM должны использовать тот же DIV. Но вы должны использовать assing introJs для модального div только тогда, когда вы действительно хотите показать модальные. Давайте подумаем, у вас есть 4 шага, и и 3-й и 4-й шаги показывают элементы вашего модальных как следующие:

HTML код:

<html> 
<style> 
    .modal { 
     z-index: 999999997 !important; 
    } 
    .modal .introjs-fixedTooltip { 
     z-index: 99999998 !important; /*I give less value to this one. The other way introJs always blocks my modals*/ 
    } 
    .modal .introjs-showElement { 
     z-index: 999999999 !important; 
     } 
</style> 

<body> 
    <div id="some-div" data-step="1" data-intro="Let's do this!"> 
     <p>some meaningful workk</p> 
    </div> 
    <div id="some-other-div" data-step="2" data-intro="You can do it!"> 
     <p>this is very important text</p> 
    </div> 

    <div id="yourmodal" class="modal fade" role="dialog" aria-hidden="true">ü 
     <form id="valuable-info" data-step="3" data-intro="use here to give info"> 
      important labels, textboxs, lists etc... 
      <button id="click-here" data-step="4" data-intro="click here to click"> 
       click 
      <button> 
     </form> 
    </div> 

    <button id="introJs-button">IntroJS</button> 
</body>

JS код:

$('#introJs-button').on('click', function() { 
    var intro = introJs(); 

    intro.onchange(function (targetElement){ 
     if (targetElement.attributes["data-step"].value === "3" && targetElement.attributes["data-step"].value === "4") { 
      var closestContainer = $(targetElement).closest('div.modal').prop('id'); 
      $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('#' + closestContainer); 
     } 
     else {    
      $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('body'); 
     } 
    }); 
})

Like Я попытался показать в своем JavaScript-коде, вы должны только добавлять introJs к модальным, когда ваши шаги данных определены в ваш модальный div. Другим способом, introJs всегда будет пытаться присоединяться к ближайшему контейнеру, а когда ничего не найдет, это вызовет ошибки/ошибки.

Когда вы даете модальное высокую z-index значения, которое вы должны также дать элемент ваших модальному, такие как Выбор2-DropDownList выше z-index значения. Или вы должны сбросить значение мода z-index. Некоторые элементы в select2-dropdownlist, такие как select2-search__field, select2-results__options и т. Д., Не поймут, что z-index ценность, которую вы даете модальным. И поскольку их значение z-index будет ниже самого модального, эти предметы никогда не будут отображаться на модальном уровне. Мое предложение сбрасывает модальное значение z-index, чтобы предотвратить это.

источник

2017-10-26 11:52:17 ShiroiTora

«Я тоже» и ссылки только на SO не разрешены. Если ваш другой ответ решает это, тогда вопрос является дубликатом и должен быть закрыт.Пожалуйста, проголосуйте, чтобы закрыть этот вопрос. В противном случае, пожалуйста, удалите это. – Rob

Хорошо. Будет ли редактировать ответ ... – ShiroiTora

Я бы не стал беспокоиться. Этот вопрос должен быть закрыт, поскольку он не содержит кода и не пытается ответить на него плакатом. – Rob

Стиль Intro.js не отображается должным образом

ответ

Смежные вопросы