14

テキスト入力の 1 つで jQuery UI datepicker を使用したいと考えています。これはダイアログモーダルにあります。

実際、通常のドキュメント テキスト入力で datepicker を呼び出すことができ、通常どおりカレンダーを取得しましたが、ダイアログ モーダル テキスト入力ではそれを行うことができません (モーダル テキスト入力内でカチカチ音をたてた後、JavaScript エラーなしで何も得られませんでした)。

これは、datepicker を呼び出す私のコードです。

$(function() {
    $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
);

css .ui-datepicker Z-index プロパティを変更しようとしましたが、まだ何も得られませんでした。

この問題を解決するためのヒントはありますか?

よろしく、

my_page.html に

function openSaisieARModal()
        {
            window_select_CodeAgence = new showModalWindow('SaisieARModal', 500);
        }

そして、私はこのスクリプトを使用します

var showModalWindow=function(id, width)
{
    var newId=id+'Copy';
    this.id=newId;



var previousNode=document.getElementById(newId);
if(previousNode!=null)
{
    previousNode.parentNode.removeChild(previousNode);
}

var rootNode=document.getElementsByTagName('body')[0];
this.node=document.createElement("div");
rootNode.appendChild(this.node);
this.node.setAttribute('id', newId);
this.node.setAttribute('title', document.getElementById(id).getAttribute('title'));
this.node.innerHTML=document.getElementById(id).innerHTML;
if(width==null)
{
    width=400;
}
$('#'+newId).dialog({autoOpen: true, modal: true, width:width });

this.closeWindow=function()
{
    $('#'+this.id).dialog('close');
}

this.centerContent=function()
{
    this.node.style.textAlign='center';
}

this.center=function()
{
    $('#'+this.id).dialog('option', 'position', 'center');
}




}

これは my_page.html のモーダル HTML コードです

<div style="display:none;">
        <div id="SaisieARModal" title="DATE">
            <table class="tableFrame" cellspacing="0px" width="100%">
                <tr>
                    <td class="topLeft">

                    </td>
                    <td class="topCenter">

                    </td>
                    <td class="topRight">

                    </td>
                </tr>
                <tr>
                    <td class="middleLeft">

                    </td>
                    <td class="middleCenter">
                        <table>
                            <tr align="center">
                                <td>
                                    Date
                                </td>
                                <td>
                                    <input id="MyTextInputID" type="text"  />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="middleRight">

                    </td>
                </tr>
                <tr>
                    <td class="bottomLeft">

                    </td>
                    <td class="bottomCenter">

                    </td>
                    <td class="bottomRight">

                    </td>
                </tr>
            </table>
            <div>
            </div>
        </div>
</div>
4

8 に答える 8

17

動作する簡単な例をモックアップしました。z-index を on に変更しようとしましたui-datepickerが、Firebug でレンダリングされたコードを調べたところ、必要な ID は のように見えますui-datepicker-div。z-index を 9999 に設定すると、モーダル ダイアログの上に表示されます。

<script type='text/javascript'> 
  $(function() {
      $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
  });

  function openmodal() {   
      var $dialogContent = $("#event_edit_container");       

      $dialogContent.dialog({
         modal: true,
         title: "Test",
         close: function() {},
         buttons: {
          save : function() {},
          cancel : function() {}
         }
      }).show();
      $("#ui-datepicker-div").css("z-index", "9999");   
  }
</script>

<div ><a href="javascript:openmodal();">Open modal</a></div>
<div id="event_edit_container" >
    <form>
        Date: <input type="text" id="datepicker" name="datepicker">
    </form>
</div>
于 2010-01-15T16:39:13.907 に答える
7

設定する場合

#ui-datepicker-div {z-index:1003;}

うまくいかない、試してみる

#ui-datepicker-div {z-index:1003 !important;}
于 2012-02-24T18:32:03.143 に答える
2

私の場合、ZendX Jquery ヘルパーを使用していました。クリップ スタイルを修正するために、次の CSS を追加しました。

#ui-datepicker-div {z-index:9999; clip:auto}
于 2011-07-16T16:40:03.940 に答える
1

jquery-ui-1.8.1.custom.css (またはお持ちの jquery ui のバージョン) で変更します

.ui-datepicker

からのクラス

{ width: 17em; padding: .2em .2em 0; }

に

{ width: 17em; padding: .2em .2em 0; z-index:99999; }

それは私にとってはうまくいき、日付ピッカーはモーダルダイアログ内でうまく機能します!

于 2011-03-25T08:56:35.973 に答える
0

参照している「モーダルダイアログ」を明確にできますか。私はこれを想定しています：

http://docs.jquery.com/UI/Dialog

あなたのコードをもっと見ることなしに、それは難しい。付随するHTMLを投稿すると便利な場合があります。

ただし、覚えておくべきことの1つは、モーダルダイアログでは、新しいウィンドウを開いているような印象を与えることです。ただし、実際には、コンテンツは他のコンテンツと同じHTMLドキュメントにあります。これにより、要素IDを割り当てるときに混乱が生じることがよくあります。たとえば、一部の重複が指定される場合があります。

また、セレクターが正しく機能していること、つまり目的のアイテムを選択していることを確認できる範囲で、デバッグ/テストを行っていることを前提としています。

于 2010-01-13T16:45:31.057 に答える
0

enter code here単純化すると（テスト用）

$('#'+newId).dialog({autoOpen: true, modal: true, width:width });

そしてそれを作ります：

$('#SaisieARModal').dialog({autoOpen: true, modal: true, width:width });

モーダルは表示されますか？また、オプションを試しましたbgiframe: trueか？

これのいずれかが完全に関連しているかどうかはわかりませんが、何かが (おそらく) モーダルの背後にある日付ピッカーを配置しています。

編集：変更した場合のもう1つのこと：

$(function() { $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' }); });

に

    $(function() { 
       $("#MytextInputID").datepicker({ dateFormat: 'dd/mm/yy' });
       $("#MytextInputID").click(function(){alert("working");});
    });

アラートは表示されますか？

于 2010-01-15T14:12:46.070 に答える
0

私の場合、以下のほうがうまくいきます

$(document).on("click", ".modal-body", function () {

    $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd'

            });

});
于 2015-06-20T16:01:36.473 に答える