bootstrap关于日期控件被模态框遮盖的BUG修复

bootstrap关于日期控件被模态框遮盖的BUG修复

在使用bootstrap-datepicker.js插件的时候,由于是在模态框中填写日期值,而模态框的值把日期控件遮盖在下面了,导致无法填写日期值。如下图所示:

其本质原因是:当我们点击日期控件填写日期时,bootstrap-datepicker.js帮我们动态生成了class为datepicker dropdown-menu的div,其中包括日期控件中的由年月日等构成的div,而dropdown-menu样式是在bootstrap.css中定义的,其样式为:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

注:本文使用的bootstrap版本为3.2.2

由于模态框的z-index值比日期控件的dropdown-menu的z-index值要大,所以其隐藏在模态框下面了,因此我们只需修改dropdown-menu的z-index值为10000即可,修改后即可正常显示了,如下图:

时间: 2024-10-26 16:27:40

bootstrap关于日期控件被模态框遮盖的BUG修复的相关文章

Easyui 的日期控件单击文本框显示日历

注意:可 用 ctrl+f 搜索 "_outerWidth():0" 1. jQuery.easyui.min.js1.3.2 版本   function _745(_746,_747){var opts=$.data(_746,"combo").options;var _748=$.data(_746,"combo").combo;var _749=$.data(_746,"combo").panel;if(_747){op

JQueryUI的datepicker日期控件

在输入日期的时候我们经常需要日期控件,jQueryUI的datapicker就是一个很好的日期控件. 1.简单的datepicker控件 目录结构:(要将images图片放到css目录下面) 代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器(Datepicker) - 限制日期范

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre

bootstrap 日期控件常用选项

使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcss.com/p/bootstrap-datetimepicker/是比较好的实现,其提供的功能还是强大的.从实用角度来说,包含时间部分和不包含时间部分的场景都很多. 典型的用法通常包括: 1.初始化包含日期,YYYY-MM-DD格式,不需要时间部分. <div class='input-group

介绍Web项目中用到的几款js日历日期控件和js文本编辑框插件

第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控件:CKEditor 官方网站:http://ckeditor.com/ 第四款 文本编辑器控件:KindEditor 官方网址:http://kindeditor.net/demo.php 第五款 文本编辑器控件:UEditor 官方网址:http://ueditor.baidu.com/webs

【mfc】不同对话框之间互相操控、全局变量与日期控件

首先先改良一下上次在<[mfc]利用文件的读写,theApp全局变量来现实登录帐号管理系统>(点击打开链接)中提到的一种方法:为了解决mfc模态对话框在任务栏中不显示的缺陷,于是在一些模态对话框中的OnInitDialog()初始化函数中,使用SetWindowLong(this->GetSafeHwnd(),GWL_EXSTYLE, WS_EX_APPWINDOW);这样虽然能够实现效果,但是在每一个模态对话框都要添加这句话那不是累死?其实如下图的解决方式: 打开新建mfc工程就创建的

jQuery Datepicker日期控件

datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. Requirements Bootstrap 2.0.4+ jQuery 1.7.1+ 在线文档 Datepicker基础使用 Datepicker功能定制 Datepicker英文文档 Datepicker中文文档 Datepicker项目主页 简单示例 var nowTemp =newDate()

ux.form.field.GridDate 支持快速选择日期的日期控件

效果如图,亲测6.2.1版本可用 1 /** 2 *支持快速选择日期的日期控件 3 */ 4 Ext.define('ux.form.field.GridDate', { 5 extend: 'Ext.form.field.Date', 6 alias: 'widget.gridDateField', 7 requires: ['ux.picker.GridDate'], 8 pickerGrid: { 9 store: { 10 //默认配置 11 data: [{ 12 value: 30,

jquery日期控件使用,起止时间

1.下载jQuery核心文件,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker,包括ui.core.js和ui.datepicker.js. 2.在HTML中引用