Gustavo Gustavo - 3 months ago 28
CSS Question

Entire window becomes blur after a modal is shown jQuery why?

I want to show a modal using jQuery, but all window becomes blured like this:

enter image description here

This is the 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:

<!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:

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

These are the default Bootstrap z-index settings:

@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. Theoretically, if you delete that line with z-index: 1; it should use the default value defined by Bootstrap before your user css

Comments