快速开发平台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.hocode.com/QAPrefecture/0021.html

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

电话
电话 18718672256

扫一扫
二维码