java 模态日历 Bootstrap
java calendar on Modal Bootstrap
您好,我正在使用模态 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">×</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> Cancelar </a>
</div>
</div>
</div>
</div>
</div>
</div>
欢迎并感谢所有建议,谢谢。
我在 calendar.js 中更新了这段代码并且效果很好!
'styles': { left: '-1000px', opacity: 0, position: 'absolute', top: '-1000px', zIndex: 999999 }
您可以尝试编写一些 CSS 来定位日历并将其 z-index
设置为大于模态日历。使用网络检查器检查模式的 z-index
是什么,并使日历的 z-index
更大。例如:
#calendar {
z-index: 1000;
}
您好,我正在使用模态 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">×</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> Cancelar </a>
</div>
</div>
</div>
</div>
</div>
</div>
欢迎并感谢所有建议,谢谢。
我在 calendar.js 中更新了这段代码并且效果很好!
'styles': { left: '-1000px', opacity: 0, position: 'absolute', top: '-1000px', zIndex: 999999 }
您可以尝试编写一些 CSS 来定位日历并将其 z-index
设置为大于模态日历。使用网络检查器检查模式的 z-index
是什么,并使日历的 z-index
更大。例如:
#calendar {
z-index: 1000;
}