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

    问题解决了!开心~

  • 相关阅读:
    新版Unity的一些小玩意儿
    Three.js踩坑笔记
    Unity 接入腾讯云COS对象存储
    通过贝塞尔曲线编辑曲线
    利用ZXing.Net生成和识别二维码
    开源免费的安卓投屏工具-Scrcpy
    Unity Reflection Probe使用入门
    Unity VFX踩坑
    windows上通过自定义后缀文件启动Unity应用
    应用于Oculus Quest的VR头显应用
  • 原文地址:https://www.cnblogs.com/zhixi/p/4911940.html
Copyright © 2011-2022 走看看