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

  • 相关阅读:
    细说javascripe事件传播流程
    由浅入深的讲述Get和Post的区别
    使用windowsAPI 加载shellcode
    从PE资源加载和执行Shellcode
    DLL注入
    shellcode注入原理
    asp.net学习--ashx一句话木马
    asp.net学习--asmx一句话木马
    asp.net学习--svc一句话木马
    php--莫客服系统代码审计(已申请CNVD)
  • 原文地址:https://www.cnblogs.com/zhangguangxiang/p/14232545.html
Copyright © 2011-2022 走看看