java calendar on Modal Bootstrap

Question

Привет, я использую модальный Bootstrap и календарь внутри, но когда я нажимаю кнопку календаря, календарь появляется сзади, и он должен быть над модальным. вот картина.

это код Java:

<script type="text/javascript"> 
//<![CDATA[ 
    window.addEvent('domready', function() { 
     myCal1 = new Calendar({ fcap1: 'd/m/Y' }, { blocked: ['12-15,20-22,25 2-5 2008'], direction: 0, tweak: { x: 6, y: 0 } }); 
     myCal2 = new Calendar({ fcap2: 'd/m/Y' }, { blocked: ['12-15,20-22,25 2-5 2008'], direction: 0, tweak: { x: 6, y: 0 } }); 

       }); 
    //]]> 
</script> 

и это режимное Bootstrap

<div class="container"> 

     <div class="modal fade" id="modal-fechacap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Asignar fechas de captura</h4> 
        </div> 
        <div class="modal-body"> 


         <input type="hidden" name="horario" id="horario" value=""/> 
          <p> 
          <label>Materia:</label> 
         <input type="text" name="materia" id="materia" value="" size='50' maxlength='80' readonly/> 
          </p> 
          <p> 
         <label>Unidad:</label> 
         <input type="text" name="unidad" id="unidad" value="" size='5' maxlength='2' readonly/> 

          </p> 
          <p> 
           <label>fecha inicio:</label> 
           <input type="text" name="fcap1" id="fcap1"/> 
           <label>fecha fin:</label> 
           <input type="text" name="fcap2" id="fcap2"/> 

          </p> 
        </div> 

        <div class="modal-footer"> 
          <div style="margin-left:10px"> 
          <button type="button" class="fechacap btn btn-success btn-sm" id="fechacap"> 
          <i class="glyphicon glyphicon-pencil"></i> Asignar fechas de captura 
          </button> 
          <a href="" class="btn btn-danger btn-sm" data-dismiss="modal"> 
          <i class="glyphicon glyphicon-ban-circle"></i>&nbsp;Cancelar&nbsp;</a> 
          </div> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

Все предложения приветствуются и оценили, спасибо.

Я обновил этот код в календаре.js и отлично поработал!

'styles': { left: '-1000px', opacity: 0, position: 'absolute', top: '-1000px', zIndex: 999999 } 

Answer 1

Вы можете попробовать написать некоторый CSS целевой календарь и установить его z-index быть больше, чем модальным. Проверьте, что z-index для модального с веб-инспектором и сделать календарь z-index больше. Например:

#calendar { 
    z-index: 1000; 
}