ブートストラップでモーダルポップアップのシェーディング効果を模倣する方法は？

Question

ブートストラップには、modal popup windowの効果があり、ページの残りの部分が非アクティブになり（リンクをクリックするなど）、グレー表示されます。私自身のCSSでその効果を模倣したいと思います。

パッケージのCSSファイルに数時間を探した後、私は私が行動を自分でバックエンジニアリングすることはできませんと結論付けました。私のためにトランクの中で単にあまりにも多くのジャンク。

説明した動作をカスタム方法でどのように模倣できますか？あるいは、境界線の黒い魔法を働かせなければならない非常に複雑な問題にぶつかりましたか？

Answer 1

デモ。 divを部分的に見て、見た目を見せてください。

モーダル/ポップアップを追加する場合は、これが背景よりも高いzインデックスを持っていることを確認してください。

はここに例を示します

$('#test').click(function() { 
 
    var backdropHeight = $(document).height(); 
 
    $('#backdrop').css('height', backdropHeight); 
 
    $('#backdrop').fadeIn(100, function() { 
 
    $('#modal').fadeIn(200); 
 
    }); 
 
}); 
 

 
$('#closeModal').click(function() { 
 
    $('#modal').fadeOut(200, function() { 
 
    $('#backdrop').fadeOut(100); 
 
    }); 
 
});

#backdrop { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.3); 
 
    z-index: 10; 
 
} 
 

 
#modal { 
 
    display: none; 
 
    position: absolute; 
 
    left: calc(50% - 100px); 
 
    top: calc(50% - 100px); 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #fff; 
 
    text-align: center; 
 
    z-index: 11; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<h1>Hellow World</h1> 
 
<button id="test">Show Modal</button> 
 
<div id="modal"> 
 
    <h2>My modal</h2> 
 
    <button id="closeModal">Close Modal</button> 
 
</div> 
 
<div id="backdrop"></div>

Answer 2

それについては何も複雑です。部分的な不透明度を持つ絶対配置された要素を使って、その背後の要素が透けて見えるようにするのは単なる「背景」です。

.backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1040; 
    background-color: #000; 
    opacity: 0.5; 
} 

あなたのコンテンツよりも高いZインデックスでページ全体をカバーしてdiv要素を追加することができますhttp://www.codeply.com/go/KhCqGTSCBe

Answer 3

私は最も簡単な解決策は.modal-backdrop.showクラスをオーバーライドすることであると思います。デフォルトでは

それがに設定されている：

.modal-backdrop.show{ 
    opacity: .5; 
} 

、あなたはちょうどあなたがuは、このクラスで欲しいもの

Answer 4

使用CSSの位置& Zを変更することができます

.modal-backdrop.show{ 
    opacity: 0!important; /* to disable "gray effect" */ 
    /* OR */ 
    opacity: 1; 
    background: red; 
    /* to change background to red */ 
} 

にそれを上書きすることができます-indexとopacityはモーダルオーバーレイを実装できます。

$('input').click(function(){ 
 
    var methodName=$(this).attr('id'); 
 
    $('.modal-dialog')[methodName]();; 
 
});

html,body{border:0;padding:0;margin:0;} 
 

 
.modal-dialog,.overlay{ 
 
position:absolute; 
 
width:100%; 
 
height:100%; 
 
left:0; 
 
top:0; 
 
} 
 
.overlay{ 
 
background:#000; 
 
opacity:0.1; 
 
z-index:100; 
 
} 
 
.dialog{ 
 
position:absolute; 
 
z-index:1000; 
 
left:50%; 
 
top:50%; 
 
} 
 
.modal-dialog{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id='fadeIn' value="Show"/> 
 
<div class='modal-dialog'> 
 
    <div class='dialog'> 
 
    <input id='fadeOut' type='button' value='Cancel'> 
 
    </div> 
 
    <div class="overlay"></div> 
 
</div>