javascript - 显示模态后整个窗口变得模糊 jQuery 为什么？-6ren

javascript - 显示模态后整个窗口变得模糊 jQuery 为什么？

转载作者：太空宇宙更新时间：2023-11-03 22:54:31

我想使用 jQuery 显示模态，但所有窗口都变得模糊，如下所示:

这是js:

$(document).ready(function () {
    $('#addLocation').click(function () {
        $('#locationModal').modal('show');
    })
    $('#addDepartment').click(function () {
        $('#departmentModal').modal('show');
    })
    $('#addRole').click(function () {
        $('#roleModal').modal('show');
    })
});

和html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pending Requests</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/settings.css"/>
    <link rel="stylesheet" type="text/css" href="css/navbar.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
    <div class="employee"><a href="/"><i class="fa fa-home"></i></a></div>
    <div class="employee"><a href="summary.html"><i class="fa fa-list"></i></a><!--Summary--></div>
    <div class="employee"><a href="planDetails.html"><i class="fa fa-globe"></i></a><!--Plan details--></div>
    <div class="employee"><a href="newRequest.html"><i class="fa fa-building-o"></i></a><!--Company holidays--></div>
    <div class="employee"><a href="teamCalendar.html"><i class="fa fa-calendar-check-o"></i></a><!--Team calendar--></div>
    <div id="manager"><a href="pendingRequests.html"><i class="fa fa-clock-o"></i></a><!--Pending requests--></div>
    <div  id="hr"><a href="settings.html"><i class="fa fa-cog"></i></a><!--Settings button--></div>
    <div class="employee"><a href="/logout"><i class="fa fa-power-off"></i></a></div>
</div>
<div class="container">
    <div class="container-fluid">
        <div class="row">
            <div>
                <a href="adduser.html"><button id="addUser">Create user</button></a>
            </div>
            <div>
                <button id="addLocation" >Create location</button>
            </div>
            <div>
                <button id="addRole">Create role</button>
            </div>
            <div>
                <button id="addDepartment" >Create department</button>
            </div>
            <div>
                <button id="addOfficialHoliday">Add official Holiday</button>
            </div>
        </div>

        <div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Location name</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <input id="locationName" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Add new location</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Role name</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <input id="roleName" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Add new role</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Department name</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <input id="departmentName" />
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Add new department</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>


<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>

<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
</body>
</html>

CSS:

body {
    background-color: #eeeeee;
}

.container {
    margin-left: 6vw;
    max-width: 980px;
    width: auto;
    border-radius: 15px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

如何解决这个问题？问题的原因可能是什么？是制作 bootstrap-modal 的更好方法吗？

最佳答案

只需将 data-backdrop="false" 添加到您的模式。所以...代码将如下所示:

<div id="locationModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">

就是这样!您的模式将显示在顶部。希望能有所帮助。

关于javascript - 显示模态后整个窗口变得模糊 jQuery 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38896947/

文章推荐： node.js - 如何使用jade页面显示数据库中的名称

文章推荐： c# - 从分数中设置高分并在unity2D游戏中显示

文章推荐： json - Gulp 使用 gulp-jade 和 gulp-data

JavaScript 模糊
我正在学习 Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的示例可以在 Google 主页的顶部菜单中看到，其中包含“更多”和“设置”下拉菜单。我有一个使用 onclick()
Tinymce 模糊/焦点事件
我尝试捕捉 tinyMce 编辑器的模糊和焦点事件。我为此找到了以下方法。 ed.onInit.add(function(ed) { tiny
jQuery 模糊() 不起作用？
这里完全被难住了。尝试一些很简单的东西，但它不起作用: $("input.input1, textarea.input1").focus(function(){ $(this).addClas
jQuery 模糊() 和点击()
我有以下 jQuery 函数: 提交表单 $(".content").delegate('.entryButton','click', function() {var form = $(this).c
jQuery 切换焦点/模糊
如何使用 jQuery 在焦点/模糊上切换元素的 CSS？ $('.answerSpace').bind('blur', function(){ $('.normProf').toggleClass(
iPhone:模糊 UIImage
在我的 iPhone 应用程序中，我有一个黑白 UIImage。我需要模糊该图像(高斯模糊即可)。 iPhone 显然知道如何模糊图像，如 it does that when it draws sha
javascript - 如何向图像添加滤镜(模糊)
这个问题已经有答案了: Blurring an image via CSS? (6 个回答) 已关闭 7 年前。我有一个场景。我想随着循环的进行模糊我的图像。我怎样才能做到这一点？这是我的代码。
java - 模糊 'StringIndexOutOfBoundsException"
这个错误是在子字符串方法上抛出的，我发现很多线程都在处理这个问题，但我遇到的问题似乎有所不同。我知道如果您的字符串短于子字符串(开始，结束)大小，它会抛出此错误，但在任何内容传递到方法调用之前都会抛出
Qt运动(线性)模糊
是否有简单的解决方案可以在 Qt 中为图像添加运动模糊？还没有找到任何关于模糊的好教程。我需要一些非常简单的东西，我可以理解，如果我可以改变模糊角度，那就太好了。最佳答案 Qt 没有运动模糊过滤器。
jQuery - 模糊，但如果单击按钮则不会
我的搜索框在正常状态下很小。焦点对准时，它会展开，并显示一个提交按钮。这样做是为了节省空间。现在，在模糊时，搜索框再次缩小，提交按钮消失。问题是，通过使提交按钮成为“竞赛”以在正确的位置单击它，对提
c# - RenderTargetBitmap 模糊
您好，我正在使用 PngBitmapEncoder 从 Canvas 在内存中创建图像。 public void CaptureGraphic() { Canvas canvas = new
javascript - 模糊();单击鼠标中键
我已经搜索过谷歌、这个和其他论坛，但无济于事……太棒了，有没有可能有像 onMiddleClick="blur();"这样的东西？在单击鼠标中键时隐藏链接的焦点边框？最佳答案 $('a').clic
Android 纹理看起来不清楚/模糊
我无法在我的应用程序中正确渲染我的纹理。我使用的艺术品是精确的，并且已经缩放且尺寸合适，但是当我在手机上渲染它时，我的纹理突然不如原始艺术品清晰/精确，我不明白为什么。有人遇到过这个问题吗？最佳答
android - 使父布局背景变暗/模糊
这里有与上述主题相同的问题但没有得到答复我这里有布局我需要在底部布局中使用与顶部布局相同的图像，但使用模糊样式设置 alpha 没有帮助 - TextView 也会影响如何虚化down布局的背
java - 如何检测页面中是否包含句子(模糊)？
我已经搜索了一段时间，但到目前为止没有找到适合我需要的东西。 ( This was helpful, but not convincing ) 从两个不同的来源，我得到两个不同的字符串。我想检查较短的
Javascript 模糊，密码输入不起作用
我有这样的代码: var passwordTextBox = angular.element("#password"); passwordTextBox.blur(function()
JQuery 隐藏可折叠菜单点击其他地方 - 模糊 -
设置此 JQuery 函数无法正常工作。有时，如果我单击元素，什么也没有发生，并且它会触发隐藏可折叠菜单的功能，如果单击文档上的任意位置，则不会重定向到正确的 href。有什么更好的方法吗？ HTML
python - 裁剪功能后字母模糊/模糊
尝试通过将坐标列表保存到数组来在多个位置裁剪我的图像后，裁剪区域中的字母变得非常模糊，我无法弄清楚原因。原图看起来像裁剪后的图像看起来像题中代码如下: import numpy as np im
android - 如何仅使屏幕的一部分变暗/模糊？
我知道我们可以调暗/模糊屏幕，如 this post 所示. 我应该怎么做才能使它的一部分变暗/模糊，使单个(或多个) View 没有任何效果，从而使整个屏幕具有突出显示 View 的效果？此外，即
php(模糊)搜索匹配
如果有人曾经向 digg 提交过故事，它会检查该故事是否已经提交，我假设是通过模糊搜索。我想实现类似的东西，想知道他们是否使用开源的 php 类？ Soundex 不这样做，句子/字符串的长度可达

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 显示模态后整个窗口变得模糊 jQuery 为什么？