datepicker et autres popups caché derrière modal popup

J'ai un jquery popup modal qui je suis en invoquant comme ce

function showDialog(clickid,reportid) {
         var clickid=clickid;
         var reportid=reportid;
            reportFilterDialog= $("#reportFilterDialog").modal({
              autoOpen: false,
              draggable: true,
              resizable: true,
              height: 220,
              width: 420,
              zIndex: 1001,
              //modal: true,
              title: 'Populate Report Parameters'

   });

Dans cette modale je vais avoir un datepicker invoquée sur le bouton cliquez sur.. comme ce

       jQuery(function() {
               jQuery( "#from_date" ).datetimepicker({ dateFormat: 'yy-mm-dd',
                   showSecond: true,
                   timeFormat: 'hh:mm:ss',
                   changeMonth: true,
                   changeYear: true,
                   showOn: "button",
                   zIndex:9999,
                    buttonImage: "/gra/images/icons/fugue/calendar-month.png",
                   buttonImageOnly: true });
       });

où from_date est champ de saisie de l'id..

Je vois encore le datepicker surgit derrière le modal popup. J'ai mis le z-index de datepicker à être plus élevé que le modal, mais sa ne fonctionne pas. J'ai aussi mis le .ui-datepicker z-index à 9999 dans le datepicker de css et de jquery css qui avait la propriété.

Aussi de tout autre popup invoqué à partir du modal popup des charges jusqu'à derrière le modal..
Comment puis-je résoudre ce problème?

  • Quoi de $.modal? Ce n'est pas de jQuery UI, parce que ce serait $.boîte de dialogue ne serait-il pas? Pouvez-vous ajouter des liens vers le plugin que vous êtes en utilisant pour cela, et datetimepicker (également pas de jQuery UI je suppose).
  • ouais ..en fait je suis en utilisant le themeforest constellation modèle de peau et j'ai une jquery.modal.js pour cela. Je peux fournir que pour vous si nécessaire. L'url est themeforest.net/item/constellation-complete-admin-skin/116461 Le datetimepicker que j'utilise est à partir de trentrichardson.com/examples/timepicker
InformationsquelleAutor pri_dev | 2012-01-20
  1. 7

    Mon pari serait que purement ai du faire seulement avec un z-index de la valeur. J'ai eu un problème similaire et la modification suivante dans l'interface utilisateur de jquery css et il a travaillé pour moi dans un modal(notez le z-index: 2000 !important - l'important était nécessaire sinon le z-index a été prise en surdéfini):

    .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 2000 !important;}
    • est la valeur de 2000 nécessaire ou toute valeur supérieure à modale z-index?
    • J'ai essayé ceci mais sa reste pas fixe. J'ai effectivement trouvé quelques commentaires sur le forum fete sur cette question. tout simplement pas effacé avec la solution qu'ils ont suggéré.. voici le post: themeforest.net/item/constellation-complete-admin-skin/... recherche de primetechpr
    • le z-index peut être n'importe quelle valeur supérieure à la modale... si vous pouvez utiliser jsfiddle.net donner le code pour ce travail là, je peux prendre une chance
    • Je suis à l'aide de jsfiddle pour la première fois. Comment puis-je donner le code par qui?
    InformationsquelleAutor Ninja
  2. 1

    J'ai trop étaient confrontés au même problème une fois. Réglage de la z-index ne fonctionne pas. J'ai essayé avec le code ci-dessous. 

    $("#IDofTimePicker").timepicker({
        template: "modal",
        format: 'HH:mm'
    });

    Définissant le modèle comme "modal" a fonctionné pour moi. Espérons que cela aide quelqu'un.

    InformationsquelleAutor Chethan