<th id="v9g6b"><track id="v9g6b"></track></th>

  • <em id="v9g6b"><acronym id="v9g6b"></acronym></em>
    <progress id="v9g6b"><pre id="v9g6b"></pre></progress>
    <tbody id="v9g6b"></tbody>
    <button id="v9g6b"><acronym id="v9g6b"></acronym></button>
    <rp id="v9g6b"><ruby id="v9g6b"></ruby></rp>

        <dd id="v9g6b"></dd>

        <em id="v9g6b"></em>

          快速开发平台Bootstrap模态框modal被灰色遮盖不能操作是怎么回事

          快速开发平台Bootstrap模态框modal被灰色遮盖不能操作是怎么回事,怎么解决,在网上查了许多资料,都是千篇一律的解释,但是是错的,本人经过深入探索才解决。现象如下图:

          快速开发平台

          贴上Modal框的页面代码:


          <div class="modal fade" id="ResourceModel" tabindex="-1" role="dialog" aria-labelledby="ResourceModelLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      @using (Html.BeginForm("ResourceManage", "Language", FormMethod.Post, new { id = "resourceForm" }))
                      {
                          @Html.AntiForgeryToken()
                          @Html.Hidden("isEdit", false)
                          @Html.HiddenFor(model => model.LanguageID)
                          @Html.Hidden("ResourceId")
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">@this.Intl("Common.Close")</span></button>
                              <h4 class="modal-title" id="ResourceModelLabel">@this.Intl("Admin.Configuration.Languages.AddNewResource")</h4>
                          </div>
                          <div class="modal-body">
                              <div class="form-horizontal">
                                  <div class="form-group">
                                      <label for="ResourceName" class="control-label col-md-2">@this.Intl("Field:YunMFramework.Domain.Model.LocaleStringResource.ResourceName")</label>
                                      <div class="col-md-8">
                                          <input type="text" id="ResourceName" name="ResourceName" class="form-control" data-val="true" data-val-required="@this.Intl("Admin.Configuration.Languages.ResourceNameRequired").ToString()" />
                                          <span class="field-validation-valid text-danger" data-valmsg-for="ResourceName" data-valmsg-replace="true"></span>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label for="ResourceValue" class="control-label col-md-2">@this.Intl("Field:YunMFramework.Domain.Model.LocaleStringResource.ResourceValue")</label>
                                      <div class="col-md-8">
                                          <input type="text" id="ResourceValue" name="ResourceValue" class="form-control" data-val="true" data-val-required="@this.Intl("Admin.Configuration.Languages.ResourceValueRequired").ToString()" />
                                          <span class="field-validation-valid text-danger" data-valmsg-for="ResourceValue" data-valmsg-replace="true"></span>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <div id="resource_msg" class="col-md-offset-2 col-md-8 alert"></div>
                                  </div>
                              </div>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">@this.Intl("Common.Close")</button>
                              <button type="submit" class="btn btn-primary">@this.Intl("Common.Save")</button>
                          </div>
                      }
                  </div>
              </div>
          </div>


          BootStrap的模态框会在页面最后面生成一段下面的这样遮挡灰色效果的代码:<div class="modal-bacdrop fade in"></div>,在Bootstrap本身的CSS和javascript是正常的,不会出现如上情况,但是在我们的快速开发平台项目中为什么会出现了呢,那肯定是哪儿写了对这段代码写了额外的CSS代码。

          快速开发平台

          本人在网上查了许久的资料,千篇一律的说法是modal-bacdrop和modal-dialog两个div层的z-index值问题,其实我改了他们的值,发现没有半毛钱关系,那是哪儿出的问题呢,估摸着肯定是哪儿对这两个div做了什么不该做的事情,殊不知我在浏览器调试中看到modal-bacdrop这个div层的CSS是下面这样的:posiont:fixed,如下图,各位应该知道原因了吧,对,将这个改成:position:relative,解决!

          快速开发平台

          改后:

          .modal-backdrop {
              position:relative;
              z-index: 2040 !important;
          }

          快速开发平台Bootstrap模态框modal被灰色遮盖不能操作是怎么回事,怎么解决,在网上查了许多资料,都是千篇一律的解释,但是是错的,各位看客,千万不要去乱写跟系统相关的DIV层的CSS,否则你要多加小心咯!

          网站&系统开发技术学习交流群:463167176

          本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
          转载请注明:文章转载自:软件开发框架 ? 快速开发平台Bootstrap模态框modal被灰色遮盖不能操作是怎么回事
          本文标题:快速开发平台Bootstrap模态框modal被灰色遮盖不能操作是怎么回事
          本文地址:http://www.sajuice.com/QAPrefecture/0021.html

          相关文章: web框架UI系列--MVC常用控件讲解

          电话
          电话 18718672256

          扫一扫
          二维码
          本港台开奖 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>