0
我想說明使用jQuery一個模式，但所有的窗口變成所迷離這樣的：模式顯示後，整個窗口變得模糊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">×</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">×</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">×</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;
}
如何解決這個問題？什麼可能是問題的原因？是引導模式的更好方法嗎？
** blur **或** black **？ –
當我有位置：在容器/ body元素上設置絕對樣式時，我遇到了這個問題。你身體的風格是什麼？ –
檢查'.modal'的'z-index'。如果不能訪問樣式表，很難確定是什麼原因造成的。 –