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>

这是Modal 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是什么，并使日历的#calendar { z-index: 1000; } 更大。例如：

$("iframe").contents().find('body').html();