- 浏览: 66630 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
在普通页面中使用Select2是正常的,但是在Modal中使用就发现了一些问题,首先如果在页面加载完成后就调用
$(".select2").select2();是会有问题的,你会发现Modal框中的select显示不正常,正确的做法是要改成
$("#editModal").on("shown.bs.modal", function(){
$(".select2").select2();
})
这是在Modal显示出来后再初始select2。
但是又发现另一个问题,如果你的Modal定义是下面这样的
<div class=" content modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="false">
你会发现select2的输入框不能输入,这时候把tabindex="-1"去掉就可以了。
还有一个方法是
在js 内加上下面这句
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
经实际验证,tabindex="-1"有时候不一定有效,加上上面这句是可以的
参考文章http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
$(".select2").select2();是会有问题的,你会发现Modal框中的select显示不正常,正确的做法是要改成
$("#editModal").on("shown.bs.modal", function(){
$(".select2").select2();
})
这是在Modal显示出来后再初始select2。
但是又发现另一个问题,如果你的Modal定义是下面这样的
<div class=" content modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="false">
你会发现select2的输入框不能输入,这时候把tabindex="-1"去掉就可以了。
还有一个方法是
在js 内加上下面这句
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
经实际验证,tabindex="-1"有时候不一定有效,加上上面这句是可以的
参考文章http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
发表评论
-
Jasper报表工具经验总结
2020-07-16 12:58 01、JasperFillManager.fillReport执 ... -
固定table表头
2016-06-21 09:11 625<!doctype html public " ... -
获得浏览器版本信息
2016-06-16 10:36 583<script type="text/java ... -
用于获取系统版本
2016-06-15 18:06 614<script type="text/java ... -
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2016-05-31 17:04 1431td 内容自动换行 table表格td设置宽度后文字太多自动换 ... -
java session时间的控制
2015-12-15 16:46 759session对象用于在会话范 ... -
Unsupported major.minor version 51.0解决办法
2015-05-08 12:57 857解决方法:打开exclipse中项目上的属性—java co ... -
base64加密解密
2015-05-08 12:21 986package test; import su ... -
更改SYBASE默认字符集为CP936
2015-04-18 11:46 1622更改SYBASE默认字符集为CP936 注意:更改字 ... -
JTDS和JDBC连接Sybase数据库
2015-04-17 19:09 1910JTDS是一个开放源代码的100%纯Java的,用于JDBC ... -
Jdbc方式连接Sybase数据库入门
2015-04-17 19:05 2424public class JdbcConnSybase { ... -
JDBC链接数据库(转载)
2015-04-17 19:02 6211、链接Sqlserver2000 驱动类 com.micr ... -
proxool连接池介绍
2015-04-14 14:12 674继前两文介绍了dbcp、c3p0的使用,本文准备再介绍另一个连 ... -
c3p0配置介绍
2015-04-14 14:11 708继上一篇介绍dbcp的配置 ... -
apache-DBCP基本配置介绍
2015-04-14 14:10 545apache-DBCP基本配置介绍 ... -
proxool连接池配置详细说明(转)
2015-04-14 08:33 1520目前市面上三个主流连接池从性能上排名如下:proxool> ... -
My eclipse快捷键
2015-02-25 10:41 6831、一般设置工作空间的编码为UTF-8 2、快捷键的配置 ... -
jsp页面返回上一页的方法
2014-11-05 10:50 1952jsp页面返回上一页的方法 1. <a hre ... -
移动平台前端开发参数1
2014-03-27 17:00 885移动平台前端开发是指 ... -
收集几个Java Web开发的网站
2014-03-13 17:12 880Zepto中文手册 http://www.html-5.cn/ ...
相关推荐
最近用bootstrap做前端框架,遇到select2单选框在bootstrap modal中不能正常使用,输入框不能获取焦点智能过滤;如下图: 解决方法一:在bootstrap.js的模态框js内加上 $.fn.modal.Constructor.prototype....
移动WEB应用实践:Bootstrap应用实践之Bootstrap Modal文章的示例代码 文章地址:http://blog.csdn.net/rowisdom/article/details/17004701
主要为大家详细介绍了Bootstrap框架下下拉框select搜索功能,感兴趣的小伙伴们可以参考一下
select2的几种常用方法总结,把代码放到相应的地方就能使用了。不过前提需要下载select2哦!
使用bootstrapvalidator做表单验证,select2下拉框支持拼音模糊匹配
bootstrap整合select2和ztree实现下拉框带树结构,select2+ztree下拉效果
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...
react-bootstrap-modal, jschr Bootstrap 模式更好的反应端口 响应 Bootstrap 模式部分是 Bootstrap Modal的jschr 。 Reimplements模式下的Twitter Bootstrap 模式组件。 基于反应引导团队的原始工作。注意:如果你...
bootstrap树控件使用树形控件在下拉框select中显示,实现树形下拉框
jq插件bootstrap-modal.js模态框引入文件
bootstrap-select.js
bootstrap-modal 扩展了 Bootstrap 内置的 modal 以提供附加功能,引入了 ModalManager 类可处理多个 modal 并侦听它们的事件。 一个简单的 ModalManager 的创建方式: $('body').modalmanager('loading'); ...
bootstrap-select组件的使用示例代码。纯html+js构造,下载可以直接查看效果。有需要的可以下载看看。
由于业务需要,本代码是由bootstrap 的select改编而成,支持下拉菜单(单选 多选),并且支持有多级菜单,比之前使用3级联动使用方便,代码简单,下载后解压,查看demo.html ,可直接套用.
bootstrap-select v1.12.4下拉菜单组件,包含css文件和js文件,如有需要的朋友可以下载使用
主要为大家详细介绍了BootStrap modal模态弹窗使用小结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这个插件功能非常强大,依赖bootstrap,只需引入相应js和css即可,上手比较简单,满足ajax动态查询,支持分页,自带模糊查询功能,输入框自动拓展。
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
JQ JS javascript bootstrap 带搜索 下拉框 select