8

Payment.phpツイッターブートストラップを使用してモーダル画面に表示しているフォーム（ ）があります。フォームには、このブートストラッププラグインを見つけた日付フィールドがあります。

ただし、問題は、カレンダーがIndex.php実際に必要なモーダルフォームではなく、親画面（）に読み込まれることです。

誰かがこれに対する解決策を提案できますか？

以下は私が試したコードです。

輸入：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

PHP：

<div class="controls">
        <input data-datepicker="datepicker" class="span3" value="2012-09-13" data-date-format="yyyy-mm-dd" id="dp2" >
        </div>

JS：

$('#dp2').datepicker();
4

6 に答える 6

15

z-indexを.datepickerクラスに追加し、.modal以上のものを作成します

.datepicker {
z-index: 9999;
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
于 2012-09-13T21:18:43.930 に答える
8

いくつかのテストの後、@ m4kの答えに対する私のコメントをもう一度確認できます。CSSファイルを介したz-indexソリューションは、OSXのFirefox19および20では機能しません。Chromeは機能します。他のブラウザやOSではこれ以上テストしませんでした。

私のために働く解決策は、以下に示すように、jquery-uiのdatepicker構成を介してz-indexを設定することです。

$('#datepicker').datepicker({ 
    beforeShow: function() { $('#datepicker').css("z-index", 1051); }
});

ここで、z-indexはモーダルの1つよりも高くする必要があります（ブートストラップ2.3では、モーダルは1050になります）。

さらに高度な解決策はbeforeShow、ページ上で現在最も高いz-indexを自動的に決定するメソッドを呼び出すことです。http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndexに例があります。

更新：モーダルよりも高いz-index1を自動的に設定します

基礎となるモーダルのz-indexが何であるかを判断する方法の簡単なサンプル：

$("#datepicker").closest(".modal").css("z-index")

したがって、beforeShowメソッドは次のようになります。

$('#datepicker').datepicker({ 
    beforeShow: function() { 
      var $datePicker = $("#datepicker");
      var zIndexModal = $datePicker.closest(".modal").css("z-index");
      $datePicker.css("z-index", zIndexModal + 1); 
    }
});
于 2013-02-26T23:57:17.837 に答える
4

..これはどれも私にはうまくいきませんでした。私はbootstrap2.3.2を実行していますが、javascriptを介してどのように試しても、bootstrapのjavascriptは常にdatepickerのz-indexを（私の場合）21にリセットします。確かに、javascriptでそれを行う方法はありますが、私はcssの方法をかなりきれいに見つけてください。

だから、これはトリックをしました：

/* otherwise datepickers won't show in a modal dialog */
.datepicker {
    z-index:1051 !important;
}
于 2013-08-06T08:41:00.827 に答える
0

beforeShowのアプローチに従いましたが、z-index計算の入力から最も近いモーダルを取得し、カレンダーである別のdivにz-indexを設定する必要がありました。

var DEFAULT_Z_INDEX = 10;

$('#my-date-input')
    .datepicker()
    .on('show', function() {

        // Make sure that z-index is above any open modal.
        var $input= $(this);
        var modalZIndex = $input.closest('.modal').css('z-index');
        var zIndex = DEFAULT_Z_INDEX;
        if (modalZIndex) {
            zIndex = parseInt(modalZIndex) + 1;
        }

        $('.datepicker').css("z-index", zIndex);
    });
于 2013-11-06T18:39:12.347 に答える
0

html 

 <!-- Text input-->
<div class="form-group"> 
    <label class="col-sm-2 control-label" for="textinput">Date TO</label>
    <div class="col-sm-10">
      <input   type="text" id="DateToP"  name="DateToP" placeholder="Post Code" class="form-control datepicker">
    </div> 
</div>

css

<style type="text/css">
 .datepicker {
    z-index:1051 !important;
  }
</style>

jquery

   $('#DateToP').datepicker({
       format: 'yyyy-mm-dd',
      autoclose: true
  });
于 2016-09-15T04:14:36.530 に答える
-1

私はディスプレイを使用しました：なし。.datepickerのCSSファイルへの属性。そして、それはうまくいきました。

于 2013-10-01T18:44:35.167 に答える