用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. keras在win下的安装,使用等

    http://cache.baiducontent.com/c?m=9d78d513d99a16ef4fece42d4c01d6160e2482744cd7c7637ac3e34a84652b5637 ...

  2. 《JavaScript Dom 编程艺术》读书笔记-第7章

    动态创建标记~内容包括: 1. 传统技术:document.write 和innerHTML 2. 深入剖析DOM方法:createElemen.createTextNode.appendChild和 ...

  3. springcloud Ribbon学习笔记一

    上篇已经介绍了如何开发eureka服务并让多个服务进行相互注册,接下来记录如何开发一个服务然后注册到eureka中并能通过ribbon成功被调用 开发一个用户服务并注册到eureka中,用户服务负责访 ...

  4. 自动化测试-8.selenium操作元素之键盘和鼠标事件

    前言 在前面的几篇中重点介绍了一些元素的定位方法,定位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  5. 创建一个vue 项目 必备的几个插件

    第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  - ...

  6. linux vi命令详解

    刚开始学着用linux,对vi命令不是很熟,在网上转接了一篇. vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指 ...

  7. SELinux初探

  8. 使用ssh服务管理远程主机

  9. docker lamp

    可以直接使用官方镜像搭建LAMP环境从官方下载PHP+Apache镜像和MySQL两个镜像来组成(如:php:7.2.3-apache-stretch和mysql:5.7.21)docker pull ...

  10. 如何在hanlp词典中手动添加未登录词

     我们在使用hanlp词典进行分词的时候,难免会出现分词不准确的情况,原因是由于内置词典中并没有收录当前的这个词,也就是我们所说的未登录词,只要把这个词加入到内置词典中就可以解决类似问题,如何操作,下 ...