zoukankan      html  css  js  c++  java
  • bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的,

    排错思路:1,在当前页面主层放置一个时间控件,测试通过

    2,在ajax加载页放置一个时间控件,测试通过

    3,在模态框最外层放置一个时间控件,不通过

    主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bootstrap版本太多,不建议修改这个文件

    解决办法:去掉最模态框最外层的tabindex="-1" role="dialog"属性,以及form层中的bootstrap-validator-form。

    去掉前

    复制代码
    <div  class="modal fade bs-example-modal-lg winningUser" id="editor" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" style="60%;" >
        <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" id="topClose"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">请选择本轮次使用的奖品</h4>
                
              </div>
              <div style="min-height:400px;padding:0 20px 20px 20px;">
                      <form id="awardForm" method="post" action="${base }/activity/ajax_add_award_settings.json"  class="form-horizontal bootstrap-validator-form" >
    复制代码

    去掉后

    复制代码
    <div class="modal fade bs-example-modal-lg" id="editor">
      <div class="modal-dialog modal-lg" style="60%;" >
        <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" id="topClose"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">请选择本轮次使用的奖品</h4>
                
              </div>
              <div style="min-height:400px;padding:0 20px 20px 20px;">
                      <form id="awardForm" method="post" action="${base }/activity/ajax_add_award_settings.json"  class="form-horizontal" >
    复制代码
  • 相关阅读:
    协程—gevent模块的使用
    协程—概念以及基本使用
    Python—同步和互斥
    Hugo博客搭建
    Linux编辑利器-Vim
    Linux命令与Shell
    python入门基础
    .netcore程序在linux下用supervisor守护
    .netcore中添加Swagger
    winform或wpf中全局异常捕获
  • 原文地址:https://www.cnblogs.com/qdphr/p/5909461.html
Copyright © 2011-2022 走看看