Bootstrapのモーダルダイアログについて

Question

現在下記のコードでモーダルダイアログを表示させると、背景色と同様にグレーアウトされて操作ができず困っております。
Bootstrapのバージョンは3.3.7です。

<!-- ボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#favorite-user">
    お気に入りユーザー
</button>

<!-- モーダルダイアログ -->
<div class="modal fade" id="favorite-user" role="dialog" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="demoModalTitle">タイトル</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                内容・・・
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">ボタン</button>
            </div>
        </div>
    </div>
</div>

style="z-index: 3000" などと追加しても改善はされませんでした。
ちなみに data-backdrop="false を指定するとモーダルダイアログがグレーアウトされず、正常に動作しますが背景はグレーアウトさせたいので、悩んでおります。
過去に似たような質問を見かけたのですが、解決されていないようだったのでご教授いただけると幸いです。

Comments

[退会済みユーザー]

提示のコード部分だけでは再現できないからね解決になるわけがない

[m.ts10806]

実際の画面キャプチャを提示いただいた方がいいかもしれません。
また「過去に似たような質問」は「調べたこと」にも該当するので、念のため質問へのリンクを質問本文に提示いただけますか？

[m.ts10806]

確かに、asahina1979さんの仰るとおりこれだけだと再現しませんね。
原因が他からの影響であることはじゅうぶん考えられます。できれば全体がわかるようなコード、誰でも再現可能なコードをご提示願います。
あと、再現するブラウザですね。

[fukuma]

ご回答いただきありがとうございます！
style="z-index: 3000"を追加する箇所を間違えていたようで、
<div class="modal-dialog" role="document" style="z-index: 3000">
とすれば正常に動作するようになりました。

[m.ts10806]

根本的な解決になってなさそうには思いますが…
またどこかで問題は再発するかもしれないので適宜調整してくださいね

Answer 1

提示された情報だけで試してみると
jsFiddle

こんな感じになり操作可能です。

提示された情報以外になにか要因はあるように思います。

Comments

[fukuma]

ご回答いただきありがとうございます！
このコードのみでは正常に動作していたのですね...
再度確認したところ、style="z-index: 3000"を追加する箇所を間違えていたようで、
<div class="modal-dialog" role="document" style="z-index: 3000">
とすれば正常に動作するようになりました。

Answer 2

<div class="modal-dialog" role="document" style="z-index: 3000"> とする事で正常に動作するのを確認しました。