<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. 机器人行业中我们常说的roll、yaw、pitch是什么?

    坐标系建立: 载体坐标系与载体坐标系的关系是三个Euler角:yaw,pitch,roll,反应了载体相对基准面的姿态. pitch是围绕X轴旋转,也叫做俯仰角.当X轴的正半轴位于过坐标原点的水平面之 ...

  2. SQL分组求每组最大值问题的解决方法收集 (转载)

    例如有一个表student,其结构如下: id      name     sort      score 1        张三      语文      82 2        李四      数 ...

  3. Codeforces Round #551 (Div. 2) EF Solution

    E. Serval and Snake 对于一个矩形,如果蛇的一条边与它相交,就意味着这条蛇从矩形内穿到矩形外,或者从矩形外穿到矩形内.所以如果某个矩形的答案为偶数,意味着蛇的头尾在矩形的同一侧(内或 ...

  4. Docker启动Get Permission Denied

    https://www.cnblogs.com/informatics/p/8276172.html 以下问题及解决方法都在Ubuntu16.04下,其他环境类似 问题描述 安装完docker后,执行 ...

  5. iOS开发基础-九宫格坐标(4)

    对iOS开发基础-九宫格坐标(3)的代码进行进一步优化. 新建一个 UIView 的子类,并命名为 WJQAppView ,将 appxib.xib 中的 UIView 对象与新建的视图类进行关联. ...

  6. HTML多图无缝循环翻页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. SpringMVC返回json数据的三种方式(转)

    原文:https://blog.csdn.net/shan9liang/article/details/42181345# 1.第一种方式是spring2时代的产物,也就是每个json视图contro ...

  8. 【学习总结】GirlsInAI ML-diary day-14-function函数

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day14 认识函数function 函数相当于一个固定的公式,一个映射.有输入,有输出. 1-python内置函数 max ...

  9. c# pda

    1.去除标题栏 FormBorderStyle属性设置为none 2.去除任务栏 [System.Runtime.InteropServices.DllImport("coredll.dll ...

  10. js01-javascript语法标准和数据类型

    语法规则 (1)JavaScript对换行.缩进.空格不敏感. 备注:每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行. (2)所有的符号,都是 ...