3

Я использую функцию Модальной CSS Bootstrap, и она отлично работает. Тем не менее, я хочу добавить функциональность, в то время как модальный диалог открыт, а остальная часть веб-страницы закрыта .modal-backdrop, один из внешних элементов из другого места в рамках структуры страницы может быть выставил на верхней части фона:Экспозиция элемента вне модального фона в CSS Bootstrap jquery modal

<div id="outside-element"> 
    I want this element exposed even while the modal is active, 
    upon clicking the button in the modal dialog box 
</div> 

<div id="help-box" class="modal fade" data-backdrop="static" data-keyboard="false" data-show="true" tabindex="-1" role="dialog" aria-labelledby="help-label" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       Click this button to show the outside element: 
       <button type="button" class="btn" aria-hidden="true" id="test-item">Click it!</button> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    (function($) { 
    $('#test-item').click(function() { 
     $('#outside-element').attr('style','zIndex:1041'); 
    }); 
    })(jQuery); 
</script> 

Как вы можете видеть в моей нынешней попытке выше, я устанавливаю г-индекс внешнего элемента в 1041, который является один выше, чем установка .modal-фона (1040). Это не делает то, что я хочу (а именно, размещение # внешнего элемента поверх модального фона), даже несмотря на то, что код звучит и «работает» (т. Е. Окончательно изменяет z-индекс).

ответ

1

Было бы здорово, если бы у вас была скрипка, чтобы показать свой код таким образом, чтобы мы могли его запустить и посмотреть, что происходит.

Вам нужно будет включать в себя положение элемента, для г-индекс вступили в силу:

#outside-element { 
    position: relative; 
    z-index: 1041; 
} 
+0

Я предполагаю, что я ожидал там быть ответом к модулю CSS Bootstrap Modal вообще, а не как к определенному для моего кода (так как мой код в основном более или менее непосредственно из функции Modal в рамках Bootstrap). Я попробовал предложение «позиция: относительное» выше, но безрезультатно. Спасибо за ввод, хотя! – David

0

.modal-фон имеет Z-индекс 1040, но сам .modal (# help-box) имеет z-индекс 1050, поэтому, если ваш внешний элемент должен находиться перед фоном и перед диалогом, вам нужно будет указать ему z-индекс 1051, а не 1041.

Если это нужно только перед фоном, но не будет перекрываться с диалоговым окном, тогда должен работать индекс z 1041, но, как @uapuapment ионный, вам также нужно будет дать ему положение, например position: relative.

Вот скрипка, показывая, что работает, с внешним элементом перед только фоном, с г-индексом 1041 и position: relative:

http://jsfiddle.net/fgyja20w/

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

  • Нет связанных вопросов^_^