jQuery显示模态后整个窗口变得模糊了吗？

Question

I want to show a modal using jQuery, but all window becomes blured like this: 我想使用jQuery显示模式，但是所有窗口都变得像这样模糊：

This is the js: 这是js：

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

And html page: 和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>

the css: 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;
}

How to fix this ? 如何解决呢？ What can be the cause of the problem ? 是什么原因引起的？ Is a better way to make bootstrap-modal ? 是使引导模式更好的方法吗？

Answer 1

Just add data-backdrop="false" to your modal. 只需将data-backdrop="false"到您的模态中即可。 so... the code will look like this <div id="locationModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false"> that's it! 所以...代码看起来像这样<div id="locationModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">就是这样！ your modal will show on top. 您的模式将显示在顶部。 Hopefully will help. 希望会有所帮助。

Answer 2

These are the default Bootstrap z-index settings: 这些是默认的Bootstrap z-index设置：

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

.modal should have the z-index value of 1050, if these default settings haven't been changed. 如果未更改这些默认设置，则.modal的z-index值应为1050。 Theoretically, if you delete that line with z-index: 1; 从理论上讲，如果使用z-index删除该行： it should use the default value defined by Bootstrap before your user css 它应该在用户css之前使用Bootstrap定义的默认值

jQuery显示模态后整个窗口变得模糊了吗？

问题描述

2 个解决方案

解决方案1
2 2018-05-03 02:07:07

解决方案2
1 已采纳 2016-08-11 13:16:56

jQuery显示模态后整个窗口变得模糊了吗？

问题描述

2 个解决方案

解决方案1 2 2018-05-03 02:07:07

解决方案2 1 已采纳 2016-08-11 13:16:56

解决方案1
2 2018-05-03 02:07:07

解决方案2
1 已采纳 2016-08-11 13:16:56