zoukankan      html  css  js  c++  java
  • 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事件介绍
    在这里插入图片描述

  • 相关阅读:
    sql2012,返回数据多时不走索引
    JeeSite 工作流Activiti的应用实例
    A011 Activiti工作流程开发的一些统一规则和实现原理(完整版)
    mstsc远程桌面全频或自定义窗口
    ECLIPSE 取消自动更新
    js中设置元素class的三种方法小结
    python笔记28-lxml.etree爬取html内容
    python笔记27-lxml.etree解析html
    Locust性能测试3-no-web模式和csv报告保存
    Locust性能测试2-先登录场景案例
  • 原文地址:https://www.cnblogs.com/zhangguangxiang/p/14232545.html
Copyright © 2011-2022 走看看