• bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转


    bootStrap模态框与select2合用时input不能获取焦点

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.

    1. 把页面中的 tabindex="-1" 删掉(测试成功)
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Panel</h3>
     </div>
    <div class="modal-body" style="max-height: 800px">
    
    <div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Panel</h3>
     </div>
    <div class="modal-body" style="max-height: 800px">
    
    1. 重写enforceFocus方法:(测试可用)
      在这里插入图片描述
      保证他能被执行到就行

    模态框内部滑动

    不使用页面的滚动条
    css:给模态框设置overflow-y: hidden;即为取消掉页面滚动条的使用
    #HelpModal{margin-top: 95px;height: 300px;overflow-y: hidden;}
    在这里插入图片描述
    添加滚动条,添加滚动条的位置不同效果不同
    .modal-content {overflow: auto;max-height:300px;}
    在这里插入图片描述
    html:模态框最外层设置id属性的overflow-y: hidden;,权重值高于自定义的.modal-open .modal类名设置的overflow-y: auto;

    select选中跳转

    select2选中事件

    $(".demo").on("select2:select",function(e){
      console.log(e);
    })
    

    **跳转到本页面中指定位置 **
    document.getElementById(‘uuuu’).scrollIntoView()
    官网select2事件介绍
    在这里插入图片描述

  • 相关阅读:
    108.将有序数组转换成二叉搜索树
    剑指Offer 09.用两个栈实现队列
    215.数组中的第K个最大元素
    AcWing 845.八数码
    1.两数之和
    迷宫问题
    倒计时
    Redis 红包
    Redis
    EF Api 全套
  • 原文地址:https://www.cnblogs.com/zhangguangxiang/p/14232545.html
Copyright © 2020-2023  润新知