<div class="modal fade" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

用modal来show一个对话框

dialog.modal({ 
    backdrop:true, 
    keyboard:true, 
    show:true 
});

然后再modal中初始化select2

dialog.find("select").select2({ 
   formatNoMatches: function() { 
       return "没有选项"; 
   }, 
   placeholder: "请选择...", 
   minimumResultsForSearch: 0, 
   allowClear: false 
});

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

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

2.js代码中加入

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

在本文中的模态框是bootstrap的模态框,目前3版本的模态框已经验证通过。

Bootstrap3 模态框 select2搜索框无法输入的更多相关文章

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

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

  2. 在BootStrap的modal中使用Select2搜索框无法输入

    用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...

  3. select2搜索框查询加遍历

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

  4. yii2 shi用modal弹窗 select2搜索框无法使用

    在modal使用begin的时候指定options选项的tabindex为false Modal::begin([ // ...... 'options' => [ 'tabindex' =&g ...

  5. js之搜索框

    目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...

  6. React后台管理系统-商品列表搜索框listSearch组件

    1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap">               <div classN ...

  7. extjs在窗体中添加搜索框

    在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({            store : this.store ...

  8. Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...

  9. 开发手机APP过程,不同使用场景APP搜索框的样式及区别

    搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...

随机推荐

  1. jenkins编译打包nodejs

    第一步 安装nodejs插件 第二步 在全局配置管理里面添加 nodejs配置 第三步 新建任务,从git上面拉取代码 cd /opt/tomcat7/bin/workspace/confdev #进 ...

  2. 30分钟了解Springboot整合Shiro

    项目结构截图: 项目在结构上没有任何特殊之处,基本就是MVC的传统结构重点需要关注的是3个Entity类.2个Controller类和1个Config类. 首先,提供pom的完整文档结构: <p ...

  3. Kubernetes — 为什么我们需要Pod?

    不过,我相信你在学习和使用 Kubernetes 项目的过程中,已经不止一次地想要问这样一个问题:为什么我们会需要 Pod? 是啊,我们在前面已经花了很多精力去解读 Linux 容器的原理.分析了 D ...

  4. EQueue

    EQueue 2.3.2版本发布(支持高可用) - dotNET跨平台 - CSDN博客https://blog.csdn.net/sD7O95O/article/details/78097193 E ...

  5. 如何给框架添加API接口日志

    前言 用的公司的框架,是MVC框架,看了下里面的日志基类,是操作日志,对增删改进行记录, 夸张的是一张业务的数据表 需要一张专门的日志表进行记录, 就是说你写个更新,添加的方法都必须写一遍操作日志,代 ...

  6. 删除 node_modules文件夹cmd指令

    方法一: npm install rimraf -g rimraf node_modules 方法二: rmdir /s/q your_app_dir 方法三: rm -f /node_modules

  7. Eclipse 查看 WebService 服务请求和响应消息

    每个WebService 对入参和返参都是有自己的要求的:别人调用我的WebService,需要按照我的要求进行传参.当我返回数据时,我也得告诉别人,我的返回数据是怎样组织的,方便别人读取. 那怎样查 ...

  8. 洛谷P3957 跳房子(Noip2017普及组 T4)

    今天我们的考试就考到了这道题,在考场上就压根没有思路,我知道它是一道dp的题,但因为太弱还是写不出来. 下来评讲的时候知道了一些思路,是dp加上二分查找的方式,还能够用单调队列优化. 但看了网上的许多 ...

  9. centos7之vsftp安装和使用

    日常用作中,我们常用的是windows的共享,但是我们都知道windows运行不稳定.原来我们用的是centos6.5上的vsftpd,最近决定把centos6.*上的服务都移植到centos7上,好 ...

  10. MySQL之 InnoDB记录结构(转自掘金小册 MySQL是怎样运行的,版权归作者所有!)

    以下内容来自掘金小册 MySQL 是怎样运行的:从根儿上理解 MySQL 版权归原作者所有! 页是MySQL中磁盘和内存交互的基本单位,也是MySQL是管理存储空间的基本单位. 指定和修改行格式的语法 ...