ロゴをモーダルバックグラウンドで表示する方法

Question

私はモーダルで少し違ったことをして、オーバーレイに常にロゴを表示しようとしています。

状況は、ユーザーがモーダルを開くとモーダルが表示されますが、私たちのロゴは暗い透明部分の上にオーバーレイされます。

Iveはこれをさまざまな方法で試してみました。私はz-indexとその位置をモーダルz-indexよりもハードコーディングしても、ロゴのz-indexがリセットされ続けることがわかります。

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マークアップがどのように見えるのかわからないので、難しいですが、それが問題だと思います。だからここでいくつかのことをすることができます。あなたは、静的なナビゲーションバーを使用している場合は、おそらくのような何かを行うことができます。

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

をそして、あなたは、高Zインデックスにあなたのロゴを配置し、それをモーダルオーバーレイ上の固定位置を与えることができます。

固定式のナビゲーションバーを使用している場合は、コンテンツが飛び跳ねるようになり、ナビゲーションバーがモーダルオーバーレイの下に消えるため、あなたの上部にロゴを追加したいページを開き、それにdisplay:noneとそれにbody.modal-openを付けてください。これはブロックの表示を与えるので、あなたのモーダルが開いているときにのみ表示されます。

それとも、単に追加し、モーダルはそうのようにjQueryを使って開かれたロゴevey時間取り除くことができます：ここで

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

私は、これはあなたが探して、それが役に立てば幸いしているものであると思います。