1

いくつかのブートストラップ モーダルを作成しようとしていますが、問題が発生しています。

モーダルの定義と次のようないくつかのタブを含む Web ページがあります。

<div id="myModal" class="modal show fade">
   <div class="modal-header">
        <h3>My Modal</h3>
   </div>
   <div class="modal-body">
       <form class="form-horizontal">

            <div class="control-group">
                 <label class="control-label">Field</label>
                 <div class="controls">
                    <input id="my-field" class="" type="text" disabled="">
                 </div>
            </div>

        </form>    
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<div class="tabbable custom-tab"> 
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
                ........
        </div>

        etc...
    </div>
 <div>

アクティブにすると、モーダルがタブ コントロールを覆います。モーダルの定義がなければタブは正常に動作しますが、定義ではタブ (または少なくともそれらの一部) をクリックできません。つまり、カーソルが小さな手に変化せず、クリックできるようになりません。モーダルが隠されていても、タブを覆っているようです。ただし、モーダルを有効にしてから閉じると、通常どおりタブをクリックできます。

何が起こっているかについてのアイデアはありますか？

読んでくれてありがとう。

4

3 に答える 3

3

モーダルを画面全体に表示しようとしていますか? モーダルを構成する 2 つの div (modal-dialog と modal-content) が省略されているため、これをお願いします。モーダルのポイントは、ブラウザーに別のページを提供することなく、別の画面を表示することです。

http://www.bootply.com/94913に2 つの欠けている div を追加したので、このバージョンhttp://www.bootply.com/89609との違いがわかります。

タブをクリックできなかった理由は、モーダルがボタンやリンクではなく最初に呼び出されたためです。上記の 2 つの div を省略したため、モーダルが画面いっぱいになり、基になるページへのアクセスが許可されなくなります。また、モーダルが画面全体に表示されるため、モーダルを閉じて続行するためにモーダルをクリックするだけではできませんでした。その時点での唯一のオプションは、閉じるボタンをクリックすることでした。

また、1000 ピクセルのモーダルは、ほとんどの表示プラットフォームでブラウザー ウィンドウのスクロールを引き起こすため、推奨されません。これがフルスクリーンのデスクトップ専用アプリケーションとして設計されている場合を除き、それに応じてモーダルを計画してください。私が使用する一般的な経験則は、モーダルが既存の Web サイトの 4 分の 1 以上を占める場合、おそらく独自のページに値するか、別のセクションに組み込む必要があるというものです。スクロールとモーダルを導入するときは、クリックオフの却下を考慮し、モーダル背景を静的またはその他のカスタム処理に設定する必要があります。

于 2013-11-18T18:35:57.187 に答える
0

「display:none;」を追加するだけです。あなたのモーダルdivスタイルに：

<div id="myModal" class="modal show fade" style="display:none;">

このようにして、アクセスするまで邪魔になりません。

于 2015-07-17T11:34:50.957 に答える