Question

我想使用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是一种更好的方法吗？

Answer 1

这些是默认的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 的z-index值应为1050。从理论上讲，如果你用z-index删除那一行：1;它应该在用户css之前使用Bootstrap定义的默认值

Answer 2

只需将data-backdrop="false"添加到您的模态中即可。所以...代码看起来像<div id="locationModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">就是这样！你的模态将显示在顶部。希望能有所帮助。

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

2 个答案: