背景灰色不适用于导航栏折叠部分
我在我的页面上使用bootstrap和jQuery，点击按钮，使用下面给出的jQuery代码使整个窗口变灰，但灰色不适用于导航栏崩溃，ID为“崩溃”，因为页面上的其他部分显示为灰色在图像附加....鉴于下面的html部分不是灰色的，完整的HTML和相应的jQuery图像附加！非常感谢帮助解决这个问题！
**jQuery**
$('#background').css({ "display": "block", opacity: 0.7,"width":$(document).width(),
"height":$(document).height()}).fadeIn("slow");
$('#overlay').center();
$('#overlay').show();
**HTML Section not Greyed Out**
<div class="row">
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="text-decoration: none">Click on Button to see options</a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li>
<a href="#/hme" id="hme" class="first-item" ng-click='showHome=false;showMortagage=false'>Home</a>
</li>
<li>
<a href="#/homeloans" ng-click="showHome=true;showMortagage=false" id="homeloans">Home Loans</a>
</li>
<li>
<a href="#/mortagage" id="mortagage" ng-click="showMortagage=true;showHome=false">Mortagage Loans</a>
</li>
<li>
<a href="#/personal" id="personal" ng-click="showHome=false;showMortagage=false">Personal Loans</a>
</li>
<li>
<a href="#/business" id="business" ng-click="showHome=false;showMortagage=false">Business Loans</a>
</li>
<li>
<a href="#/others" id="others" ng-click="showHome=false;showMortagage=false">Other Loans</a>
</li>
<li>
<a href="#/aboutus" id="aboutus" ng-click="showHome=false;showMortagage=false">About Us</a>
</li>
<li>
<a href="#/contactus" class="last-item" id="contactus" ng-click="showHome=false;showMortagage=false">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
**Complete HTML**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loan Site</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/specific.css" type="text/css"/>
</head>
<body ng-app="demoApp">
<div class="container">
<div class="row">
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="text-decoration: none">Click on Button to see options</a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li>
<a href="#/hme" id="hme" class="first-item" ng-click='showHome=false;showMortagage=false'>Home</a>
</li>
<li>
<a href="#/homeloans" ng-click="showHome=true;showMortagage=false" id="homeloans">Home Loans</a>
</li>
<li>
<a href="#/mortagage" id="mortagage" ng-click="showMortagage=true;showHome=false">Mortagage Loans</a>
</li>
<li>
<a href="#/personal" id="personal" ng-click="showHome=false;showMortagage=false">Personal Loans</a>
</li>
<li>
<a href="#/business" id="business" ng-click="showHome=false;showMortagage=false">Business Loans</a>
</li>
<li>
<a href="#/others" id="others" ng-click="showHome=false;showMortagage=false">Other Loans</a>
</li>
<li>
<a href="#/aboutus" id="aboutus" ng-click="showHome=false;showMortagage=false">About Us</a>
</li>
<li>
<a href="#/contactus" class="last-item" id="contactus" ng-click="showHome=false;showMortagage=false">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div id="moduletable">
<h3>EMI Calculator</h3>
<div ng-controller="EmiCtrl" class="emi">
<form method="post" name="loanForm" id="loanForm">
<table>
<tr>
<td>
Loan Amount:<br/>
<span class="clr" ng-show="loanForm.loan.$error.required">required</span>
</td>
<td>
<input type="number" name="loan" id="loan" ng-model="user.loan" required>
</td>
</tr>
<tr>
<td>
Tenure(Months):<br/>
<span class="clr" ng-show="loanForm.months.$error.required">required</span>
</td>
<td>
<input type="number" name="months" id="months" ng-model="user.months" required>
</td>
</tr>
<tr>
<td>
Int Rate:<br/>
<span class="clr" ng-show="loanForm.rate.$error.required">required</span>
</td>
<td>
<input type="number" name="rate" id="rate" ng-model="user.rate" required>
</td>
</tr>
<tr>
<td>
EMI:
</td>
<td>
<input type="text" name="pay" id="pay" size="8" ng-model="user.pay">
</td>
</tr>
<tr>
<td style="padding:20px;">
<div id="overlay">
<a href="#" id="cls" style="font: '20px bold'"
onclick="$('#background').fadeOut('slow');$('#overlay').hide();">
<img src="img/close.gif" style="position: absolute;top: 0px;right: 0px;"/>
</a>
<div style="border: 2px solid;margin: 0;padding: 0;text-align: center">
<div style="font-weight: bold;font-size: 20px;">
<span>EMI Amortization Chart</span><span></span>
</div>
<div style="text-align: left;padding-left:180px">
<span>Loan Amount:</span><span id="loanamt"></span>
</div>
<div style="text-align: left;padding-left:180px">
<span>Tenor:</span><span id="monthtnr"></span>
</div>
<div style="text-align: left;padding-left:180px">
<span>Int Rate:</span><span id="intrt"></span>
</div>
<div style="text-align: left;padding-left:180px">
<span>EMI:</span><span id="emi"></span>
</div>
</div>
<br/><br/>
<div id="emitbl">
</div>
</div>
<button type="submit" id "btncalculate" e" name="btncalculate" onclick='toggleModal()' ng-disabled="loanForm.$invalid">Calculate</button>
</td>
<td>
<input type="button" name="reset" id="reset" value="Reset" ng-click="reset()">
</td>
</tr>
</table>
</form>
</div>
</div>
<!--Content for alert box -->
<div id="box">
<a href="#" id="cls" style="font: '20px bold'"
onclick="$('#background').fadeOut('slow');$('#large').fadeOut('slow');$('#box').hide();$('#screen').hide();">
<img src="img/close.gif" style="position: absolute;top: 0px;right: 0px;"/>
</a>
<div id="response"></div>
</div>
<div id="screen"></div>
<!--Content for alert box -->
<div id="moduletable" style="margin-top:15px;margin-bottom: 10px">
<h3>Apply For Loans</h3>
<div>
<form method="post" id="adminForm" name="adminForm" ng-controller="ClearCtrl">
<div class="row">
<div class="col-xs-4" id="txt">
<div>Loan Type</div>
<div class="clr" ng-show="adminForm.loan_type.$error.required">required</div>
</div>
<div class="col-xs-6">
<select name="loan_type" id="loan_type" ng-model="user.loan_type" ng-init="user.loan_type='Please Select'" required>
<option value="Please Select">Please Select</option>
<option value="Home Loan">Home Loan</option>
<option value="Mortgage Loan">Mortgage Loan</option>
<option value="Personal Loan">Personal Loan</option>
<option value="Business Loan">Business Loan</option>
<option value="Other Loan">Other Loan</option>
</select>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>Name</div>
<div class="clr" ng-show="adminForm.nme.$error.required">required</div>
</div>
<div class="col-xs-6">
<input type="text" name="nme" id="nme" class="textbox" ng-model="user.nme" required>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>Mobile No</div>
<div class="clr" ng-show="adminForm.phone_no.$error.required">required</div>
</div>
<div class="col-xs-6">
<input type="number" name="phone_no" id="phone_no" maxlength="10" class="textbox" ng-model="user.phone_no" required>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>E-mail ID</div>
<div class="clr" ng-show="adminForm.email_id.$invalid">required</div>
</div>
<div class="col-xs-6">
<input type="email" name="email_id" id="email_id" maxlength="35" class="email" ng-model="user.email_id" required>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>Company</div>
<div class="clr" ng-show="adminForm.company.$error.required">required</div>
</div>
<div class="col-xs-6">
<input type="text" name="company" id="company" class="textbox" ng-model="user.company" required>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>Occupation</div>
<div class="clr" ng-show="adminForm.Occupation.$error.required">required</div>
</div>
<div class="col-xs-7">
<select name="Occupation" id="Occupation" ng-model="user.Occupation" ng-init="user.Occupation='Please Select'" required>
<option value="Please Select">Please Select</option>
<option value="Salaried">Salaried</option>
<option value="Self employed-Proprietor">Self employed-Proprietor</option>
<option value="Self employed-partnership">Self employed-partnership</option>
<option value="Self employed-Pvt Ltd">Self employed-Pvt Ltd</option>
<option value="Self employed-Ltd">Self employed-Ltd</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>Netincome (PM)</div>
<div class="clr" ng-show="adminForm.netincom.$error.required">required</div>
</div>
<div class="col-xs-6">
<input type="number" name="netincom" id="netincom" maxlength="500" class="editbox" ng-model="user.netincom" required>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>City</div>
<div class="clr" ng-show="adminForm.City.$error.required">required</div>
</div>
<div class="col-xs-6">
<select name="City" id="City" ng-model="user.City" ng-init="user.City='Please Select'" required>
<option value="Please Select">Please Select</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Visakhapatnam">Visakhapatnam</option>
<option value="Vijayawada">Vijayawada</option>
<option value="Kakinada">Kakinada</option>
<option value="Thirupathi">Thirupathi</option>
</select>
</div>
</div>
<div style="clear:both; height:10px;"> </div>
<div class="row">
<div class="col-xs-4" id="txt">
<div>Remarks</div>
<div class="clr" ng-show="adminForm.Remarks.$error.required">required</div>
</div>
<div class="col-xs-6">
<textarea name="Remarks" id="Remarks" cols="20" rows="10" style="width: 200px" ng-model="user.Remarks" required></textarea>
</div>
<div>
<div style="clear:both; display:block; width:100%; text-align:left;">
<div style="float:left;">
<div style="float:left; margin:2px;">
</div>
<button href="img/SendingMail.gif" id="SendButton" name="SendButton" style="margin: 0px 0px 0px 298px;" ng-disabled="adminForm.$invalid" ng-click="clear()">Send</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7" id="rightcol">
<div class="row">
<div class="moduletable_menu col-md-4" ng-show="showHome">
<h3>Home Loans</h3>
<ul class="menu">
<li><a href="#/eligiblehome" id="eligiblehome"><span>Eligibility</span></a></li>
<li><a href="#/documenthome" id="documenthome"><span>Documents</span></a></li>
<li><a href="#/faqhome" id="faqhome"><span>FAQ'S</span></a></li>
</ul>
</div>
<div class="moduletable_menu col-md-4" ng-show="showMortagage">
<h3>Mortagage Loans</h3>
<ul class="menu">
<li><a href="#/eligiblemortagage" id="eligiblemortagage"><span>Eligibility</span></a></li>
<li><a href="#/documentmortagage" id="documentmortagage"><span>Documents</span></a></li>
</ul>
</div>
</div>
<div class="row">
<div ng-view>
</div>
</div>
</div>
</div>
<footer>
<div id="footer"></div>
</footer>
</div>
<div id="large"></div>
<div id="background"></div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular.min.js.map"></script>
<script src="js/jquery.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
[1]: http://i.stack.imgur.com/JHk7x.png
2 个答案:
答案 0 :(得分：0)
因为导航栏“z-index”的值高于“背景”，你需要降低导航栏的z-index或增加叠加的z-index
z-index值越高，其开启的层越高，最高值将位于较低值之上。
例如CSS：
#background{
z-index: 100;
}
.navbar-collapse {
z-index: 99;
}
希望这会有所帮助：）
答案 1 :(得分：0)
Bootstrap有一个内置的modal可以做到这一点。它可能比编写自己的自定义JS和CSS更容易。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？