Modal Bootstrap 上的 java 日历

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>

欢迎并感谢所有建议，谢谢。

我在 calendar.js 中更新了这段代码并且工作得很好!

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

Answer 1

您可以尝试编写一些 CSS 来定位日历，并将其 z-index 设置为大于模态的 z-index。使用 Web 检查器检查模态的 z-index 是什么，并将日历的 z-index 调大。例如:

#calendar {
    z-index: 1000;  
}