• 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" >

    问题解决了!开心~

  • 相关阅读:
    每天进步一小点
    C# 类
    XML JavaScript
    基础XML
    多态,重载,重写
    数据结构
    sql server规范
    .net core 使用TimeZoneInfo类的时间与时间戳转换
    git 重命名文件与文件夹
    IDEA spring boot 开启热加载
  • 原文地址:https://www.cnblogs.com/zhixi/p/4911940.html
Copyright © 2020-2023  润新知