2016-12-19 3 views
1

Я создаю веб-приложение, в котором я хочу выбрать дату из текстового поля, которое расположено на модальном, когда я нажимаю на дату ввода текста (материальное проектирование), появляется за модальным, я знаю это потому, что мне нужно, чтобы установить г-индексbootstrap modal с z-index css

следующие примеры судил меня, но я неудачно

<style> 
    .modal{ 
     position:relative; 
     z-index:1; 
} 
    .calsen{ 
     position:absolute; 
     z-index:1; 
} 
</style> 

модальный не открывается

<style> 
    .modal{ 
     position:absolute; 
     z-index:1; 
} 
    .calsen{ 
     position:absolute; 
     z-index:2; 
} 
</style> 

содержание за т он модальный появляется дата

<style> 
    .modal{ 
     position:absolute; 
     z-index:10000; 
} 
    .calsen{ 
     position:absolute; 
     z-index:100000; 
} 
</style> 

не появляется за модальным и стиль моей модальной функции innappropriateky

<style> 
    .modal{ 
     position:fixed; 
     z-index:1; 
} 
    .calsen{ 
     position:absolute; 
     z-index:100000; 
} 
</style> 

содержание за модальным появляется

это, как я объявляю модальный и текстовое поле (внутри модального тела)

<div id="update" class="modal fade" role="dialog" > 

В текстовом поле

<div class="form-clearify"> 
    <div class="row" style="margin-top:3px;"> 
     <div class="col-md-12 col-sm-12 col-xs-12" style="background-color:whitesmoke;"> 
      <label>Select Date </label> 
      <md-datepicker class="calsen" ng-model="mddate" ng-change="dateformatechanged()" md-placeholder="Enter date"></md-datepicker> 
     </div> 
    </div> 
</div> 

Что мне нужно сделать сейчас?

+1

PLS, предоставить ссылку на jsFiddle. никто не соберет твоего лего вместе. – Banzay

ответ

1

Попробуйте это:

CSS:

.md-datepicker-calendar-pane { 
    z-index: 1200; 
} 
0

я хотел бы сделать Z-индекс вашего DatePicker выше, вместо того, чтобы возиться с модальным Z-индекс. (Что может сломать что-то еще)