用modal来show一个对话框

dialog.modal({
backdrop:true,
keyboard:true,
show:true
});
  • 1
  • 2
  • 3
  • 4
  • 5

然后再modal中初始化select2

dialog.find("select").select2({
formatNoMatches: function() {
return "没有选项";
},
placeholder: "请选择...",
minimumResultsForSearch: 0,
allowClear: false
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这时候select2的搜索框无法输入,一般有两方面的原因 
1.检查下modal的div中是否有tabindex=”-1”,这个属性

<div class="modal fade in" id="dialog-new-draft">
  • 1

2.js代码中加入

$.fn.modal.Constructor.prototype.enforceFocus = function () {};
  • 1

满足这两个一般就没问题了。

在BootStrap的modal中使用Select2搜索框无法输入的更多相关文章

  1. Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backd ...

  2. 在BootStrap的modal中使用Select2

      bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; bootstrap4 $.fn.modal.C ...

  3. Bootstrap 模态框 select2搜索框无法输入

    去掉模态框的div中的 tabindex="-1" 这个属性 <div class="modal fade" role="dialog" ...

  4. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  5. select2的搜索框不能输入搜索内容

    按照select2官网配置完后,搜索框弹出后无法输入内容,究竟怎么回事,于是在其他页面尝试了select2,发现可以啊,为什么在这个地方不可以,终于找到了造成这个问题的不同之处:select2在模态对 ...

  6. select2搜索框查询加遍历

    <div class="form-group"> <label class="control-label col-sm-1 no-padding-rig ...

  7. 解决 Ant Design Modal 中的 Select 选项框不能显示的问题

    antd 的 select 在 modal 里不能显示候选框 代码示例 <a-modal> <a-select> <!-- options --> </a-s ...

  8. BootStrap 的modal 中使用typeahead

    刚开始怎么也不现实,在页面上显示正常. 调试发现是下拉框被modal遮挡住了, 找到样式dropdown-menu    修改z-index值为2000后,显示正常.(modal的z-index值为1 ...

  9. bootstrap --- 在 modal中的 datetimepicker 关闭 ,会造成 modal也会被关闭.

    这个大概是事件冒泡造成的. 解决办法: <form id="userForm" class="form-horizontal"> <input ...

随机推荐

  1. scrapy的Middleware

    对于下载中间件 settings里的数字大小: process_request的顺序 数字越小,越先调用 process_response 的顺序, 数字越大,越先调用 返回值: process_re ...

  2. JAVA 程序的基本语法

    首先看我们的第一个java程序: public class HelloWorld { public static void main(String[] args) { System.out.print ...

  3. Python编程高级特性--迭代器

    一.简单介绍 直接作用于for循环的数据类型有以下几种: 集合数据类型: list 例如:list = ["yuhaohao", "lisheng", &quo ...

  4. Windows----Github环境搭建

    关于Github的那点事: 一.下载安装   下载地址: https://git-for-windows.github.io/  在官方下载完后,安装到Windows Explorer integra ...

  5. python 如何生成好看的报告,在unittest的框架下

    怎么生成报告:需要导入BeautifulReport import BeautifulReport as bf import unittest class Test_login(unittest.Te ...

  6. list 的相关操作

    # ### 列表的相关操作 # (1) 列表的拼接 lst1 = [1,2,3] lst2 = [4,5,6] lst = lst1 + lst2 print(lst) # (2) 列表的重复 lst ...

  7. MVC+三层+ASP.NET简单登录验证

    通过制作一个登录小案例来搭建MVC简单三层 在View --Shared下创建一个母版页: <!DOCTYPE html> <html> <head> <me ...

  8. Linux跨服务器发送文件

    在要发送的文件所在的目录下,输入下列命令 第一种: scp -r test.jar root@127.0.0.1:$(pwd)/test.jar 其中root为服务器账户名,127.0.0.1为要发送 ...

  9. codeforces 804A Find Amir 思维/水题

    A few years ago Sajjad left his school and register to another one due to security reasons. Now he w ...

  10. springboot 缓存架构

    线程内部缓存:a. 局部变量HashMap, 方法间传递  b. 使用ThreadLocal 本地缓存:单jvm内共享 可以使用(Concurrent)HashMap自己实现,也可以使用GuavaCa ...