Как сделать логотип появляться через модальный фон

Question

Я пытаюсь сделать что-то немного отличающееся от модального и показать наш логотип поверх наложения всегда.

ситуация возникает, когда пользователь открывает модальный, появляется модальный, но наш логотип затем накладывается поверх темно-прозрачной части.

Ive пробовал это несколькими способами и может видеть, что z-индекс логотипа продолжает сбрасываться, даже если я жестко задаю z-индекс и его положение над индексом z-индексов модалов.

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

есть что-то, что здесь отсутствует?

заранее спасибо

$("[data-toggle=modal").click(function(){ 
// events to occur globally for when a modal is toggled 
    $("#ajax-right-modal-large").on('shown.bs.modal',function(){ 
     $("#logo").addClass('hidden'); 
     $("#logo-modal").removeClass('hidden').attr('style','border:1px solid blue; z-index: 1701 !important;');  
     $(".fade-in").css('z-index','1501'); 
     $("#logo-modal").attr('style',''); 
    }); 
    // end function 
}); 

Answer 1

Я предположил бы, что у вас есть позиция устанавливается на панели навигации, так что вы пытаетесь позиционировать свой логотип, когда родитель имеет место, и именно поэтому вы не получаете никаких результатов , Это трудно сказать, так как я не вижу, как выглядит ваша разметка html, но я предполагаю, что это проблема. Таким образом, вы можете сделать пару различных вещей здесь. Если вы используете статический Navbar вы можете сделать, вероятно, сделать что-то вроде:

body.modal-open .navbar-static-top{ 
    position:inherit; 
} 

И тогда вы можете поместить свой логотип на высокий Z-индекс и дать ему фиксированное положение над модальным наложением.

Если вы используете фиксированную навигационную панель, вы можете не захотеть этого делать, потому что это приведет к тому, что ваш контент переместится, и ваш навигатор исчезнет под модальным наложением, поэтому вы можете просто добавить логотип в верхней части своего страницы и дайте ей display:none, а затем на body.modal-open Дайте это отображение блока, чтобы оно отображалось только тогда, когда ваш модальный файл открыт.

Или вы можете просто добавлять и удалять время логотип Evey модальный открыт с JQuery, как так:

$(document).on('shown.bs.modal',function(){ 
    $('body').append('<a class="appended-logo">Appended Logo</a>') 
}); 
$(document).on('hidden.bs.modal',function(){ 
    $('.appended-logo').remove(); 
}); 

Вот скрипка с просто положить логотип в верхней части страницы с дисплеем none, а также с прикрепленным логотипом jquery, чтобы вы могли видеть их оба.

Fiddle Demo

Во всяком случае, я надеюсь, что это то, что вы ищете, и надеюсь, что это помогает.