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事件介绍
    在这里插入图片描述

  • 相关阅读:
    如何使用NuGet package .nupkg文件?
    利用Z.Expressions.Eval表达式求值
    表达式实现填写“阶段标记”属性
    NX导入DWG失败
    简单工厂模式(Simple Factory Pattern)
    电脑装系统蓝屏未解决
    idea intellij 配置总结
    poiexcel 笔记
    Springboot
    Springboot--maven命令子模块单独打包
  • 原文地址:https://www.cnblogs.com/zhangguangxiang/p/14232545.html
Copyright © 2011-2022 走看看