引导模态内的角材料md-datepicker [英] angular material md-datepicker inside bootstrap modal
问题描述
我正在尝试在Bootstrap模态中使用Angular材质md-datepicker
,但是,在单击模态弹出窗口的日期时会隐藏它.我该如何解决这个问题?
I am tring to use Angular material md-datepicker
inside a Bootstrap modal but, on clicking the date the modal popup hides. How can i solve that problem?
<div class="modal fade " tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Introduction video for body composition ...</h4>
</div>
<div class="modal-body">
<md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker>
</div>
</div>
</div>
</div>
<div class="modal fade " tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Introduction video for body composition ...</h4>
</div>
<div class="modal-body">
<md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker>
</div>
</div>
</div>
</div>
现在如何...
在模式类中禁用display: block
后...
After disabling display: block
in the modal class...
推荐答案
我遇到了同样的问题,发现此解决方案一个>类似的问题实际上解决了这个问题.您只需要在模式窗口的HTML代码中添加以下样式:
I had the same problem, and found that this solution to a similar question actually solved the problem. You just need to add the following style to the HTML code of your modal window:
<style>
.md-datepicker-calendar-pane {
z-index: 1200;
}
</style>
针对同一问题的其他建议的答案说,您还可以修改angular-material.css
文件并更改z -index,但是我不建议您修改源文件,因为如果您决定更新库,则更改可能会被还原.
The other upvoted answer to the same question says that you can also modify the angular-material.css
file and change the z-index there, but I don't recommend modifying the source files because your change may be reverted if you decide to update the library.
这篇关于引导模态内的角材料md-datepicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!