莫代爾引導日曆上的Java日曆

Question

嗨，我使用的是模態引導程序和日曆裏面，但是當我點擊日曆按鈕日曆出現在後面，它必須在模態。這是圖片。

這是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> 

，這是模態引導

<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> 

所有建議都歡迎和讚賞，感謝。

我更新了calendar.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; 
}