美文网首页我爱编程
bootstrap-modal笔记

bootstrap-modal笔记

作者: Chopin406 | 来源:发表于2017-12-10 19:13 被阅读40次

    bootstrap modal和一些组件在一起使用会产生一些冲突,已知的就有bootstrap-datepicker和select2

    select2

    bootstrap version : v3.3.5
    select2 version : 4.0.5

    问题:当modal添加tabindex属性时,select2的input搜索不能聚焦。
    修复:去掉tabindex

    <div class="modal fade" id="mymodal" tabindex="-1">
          <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">select2</div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>客户</label>
                            <select id="select2">
                                <option>hello</option>
                                <option>wold</option>
                                <option>jano</option>
                                <option>well</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    

    tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时),几乎所有浏览器均 tabindex 属性,除了 Safari.
    1 是第一个,这里-1是为了获得tab优先使用的保险做法。

    bootstrap-datepicker

    bootstrap version : v3.3.5
    bootstrap-datepicker version:1.7.1

    问题:datepicker弹出选择后hide事件会触发modal的hide事件。
    修复:这是因为datepicker的hide事件向上冒泡了,所以只要在hide事件方法中阻止datepicker向上冒泡。

    $('.datepicker').datepicker().on('hide', function(event) {
    event.stopPropagation();
    });
    

    相关文章

      网友评论

        本文标题:bootstrap-modal笔记

        本文链接:https://www.haomeiwen.com/subject/jupvixtx.html