在Bootstrap中得模态框(modal)中下拉不能显示得问题
$.fn.modal.Constructor.prototype.enforceFocus = function () {
$("#insertModal").on("shown.bs.modal", function () {
$("#Ranks_Name").select2({
dropdownParent: $("#insertModal")
});
$("#Role").select2({
dropdownParent: $("#insertModal")
});
})
$("#updateModal").on("shown.bs.modal", function () {
$("#Ranks_Name1").select2({
dropdownParent: $("#updateModal")
});
$("#Role1").select2({
dropdownParent: $("#updateModal")
});
})
};
在普通页面中使用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
https://www.cnblogs.com/sheldon-lou/p/3730905.html
https://blog.csdn.net/u013126379/article/details/53044933
在Bootstrap中得模态框(modal)中下拉不能显示得问题的更多相关文章
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- bootstrap中的模态框(modal,弹出层)
默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- Bootstrap学习5--bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- Bootstrap Modals(模态框)
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...
- bootstrap课程11 模态框如何使用
bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...
随机推荐
- 图像配准建立仿射变换模型并用RANSAC算法评估
当初选方向时就由于从小几何就不好.缺乏空间想像能力才没有选择摄影測量方向而是选择了GIS. 昨天同学找我帮他做图像匹配.这我哪里懂啊,无奈我是一个别人有求于我,总是不好意思开口拒绝的人.于是乎就看着他 ...
- linux 【第五篇】特殊权限及定时任务
特殊权限 [root@VM_141_154_centos ~]# ls -ld /tmp drwxrwxrwt. 8 root root 4096 Apr 5 08:11 /tmp /tmp/ 公共目 ...
- Nyquist–Shannon sampling theorem 采样定理
Nyquist–Shannon sampling theorem - Wikipedia https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_s ...
- Entity Framework底层操作封装V2版本号(3)
如今是附加的,组合查询须要的扩展类.大家知道lanmda表达式的组合条件比較麻烦,所以就加了一样一个类,方便进行组合查询: using System; using System.Collections ...
- CRM 配置 ADFS后,使用自定义STS遇到的问题总结
1 登录ADFS服务查看 ADFS日志 2 根据日志提示的错误,设置ADFS对应的属性 (Get-ADFSRelyingPartyTrust) | Set-ADFSRelyingPartyTrust ...
- Adding Security to an Existing Website
The procedure earlier in this article relies on using the Starter Site template as the basis for web ...
- CentOS7.2 设置GRUB2引导界面分辨率
最近在学习OS引导启动,GRUB2的学习材料也不少,主要还看官方手册清晰些. 公司里办公机的多启动用的ubuntu的界面,还挺炫酷的.之前看其他博客网文里看到可以设置grub2的分辨率,我拿CentO ...
- linux文件读写 文件锁、select、poll【转】
本文转载自:http://blog.csdn.net/fansongy/article/details/6853395 一.文件锁 文件锁用于多个用户共同使用或操作同一个文件.有读锁的时候可以再加读锁 ...
- 2-3 Windows下一站式开发环境anaconda搭建
D:\Users\ZHONGZHENHUA\Anaconda3\Scripts\activate.bat https://www.geforce.com/hardware/notebook-gpus/ ...
- bzoj 4500: 矩阵【差分约束】
(x,y,z)表示格子(x,y)的值为z,也就是x行+y列加的次数等于z,相当于差分约束的条件,用dfs判断冲突即可. #include<iostream> #include<cst ...