【发布时间】：2014-03-31 23:43:59
【问题描述】：
Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<script src="/js/jquery-2.1.0.js" type="text/javascript" ></script>
<script src="/js/bootstrap.js" type="text/javascript" ></script>
<script src="/Scripts/Site.js" type="text/javascript"></script>
<link rel="Stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="Stylesheet" href="Styles/Site.css" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
font-family: Vani;
}
</style>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
WebForm2.aspx（文件的一部分）
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<asp:Content ID="WebForm2" ContentPlaceHolderID="MainContent" runat="server">
<!-- 1.) About SBAIMS Modal -->
<div class="modal fade" id="aboutsbaims" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<table class="table-borderless" width=100%>
<tr>
<td style="width:40%" align="center">
<img src="sbalarge.png" class="img " alt="SBA_Logo" height=100 width=180>
</td>
<td style="width:60%" align="left">
<h2>About  S.B.A.I.M.S.</h2>
</td></tr>
</table>
</div>
<div class="modal-body">
<h5 style="text-align:justify; line-height:22px;"><b>Shantinath Book Agency Inventory Management System (S.B.A.I.M.S.)</b>
</div>
<div class="modal-footer black">
<h5 align="left" style="color:#E2E2E2;">© All Copyrights Reserved By: Shantinath Book Agency<span style="display:inline-block; width:60px;"></span><button type="button" id="mdl1okay" class="btn btn-info" data-dismiss="modal" style="line-height:0.6; background-color:#196CA3">  <b> Okay! </b>  </button></h5>
</div>
</div>
</div>
</div>
<!-- 2.) Logout Confirmation Modal -->
<div class="modal fade" id="logoutconfirm" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Logout Confirmation</h4>
</div>
<div class="modal-body">
<h5> Are you sure you want to Logout ? </h5><br />
</div>
<div class="modal-footer">
<asp:Button CssClass="btn btn-primary" Text="Yes" runat="server" ID="yeslogout" onclick="yeslogout_Click"></asp:Button>
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- ********************************** End of all Modals ********************************** -->
<div id="mycontent">
<div class="table-responsive">
<table class="table table-borderless table-condensed black table-responsive" style="position:fixed; width:100%; z-index:2;">
<tr>
<td width="24%"><img src="sbalogo.png" style="vertical-align:middle; padding-top:3px; padding-left:3px" class="img img-responsive" alt="SBA_Logo" height=55 width=100></td>
<td width="52%" align="center"><p style="color:#E2E2E2; vertical-align:middle; font-size:35px;">S.B.A.I.M.S.</p></td>
<td width="24%" align="right" style="padding-top:15px">
<ul class="uldl">
<li class="dropdown" style="padding-bottom:8px; padding-right:10px">
<a href="" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog" style="color:#E2E2E2; font-size:30px; vertical-align:middle;"></span></a>
<ul class="dropdown-menu" style="padding-top:10px; padding-bottom:10px;">
<li align="left" class="ddli" id="li1"><a data-toggle="modal" href="#changepassword">Change Password</a></li>
<li align="left" class="ddli" id="li2"><a href="#">User Manual</a></li>
<li align="left" class="ddli" id="li3"><a data-toggle="modal" href="#aboutsbaims">About   S.B.A.I.M.S.</a></li>
<li align="left" class="ddli" id="li4"><a data-toggle="modal" href="#logoutconfirm">Logout</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="nav">
<ul class="nav nav-tabs nav-justified prntnvtabs">
<li class="active"><a href="#addtoinventory" data-toggle="tab" style="font-size:20px;"><span class="glyphicon glyphicon-plus" style="font-size:20px;"></span>  Add to Inventory</a></li>
<li><a href="#updateinventory" data-toggle="tab" style="font-size:20px;"><span class="glyphicon glyphicon-arrow-up" style="font-size:20px;"></span>  Update Inventory</a></li>
<li><a href="#viewinventory" data-toggle="tab" style="font-size:20px;"><span class="glyphicon glyphicon-eye-open" style="font-size:20px;"></span>  View Inventory</a></li>
<li><a href="#createinvoice" data-toggle="tab" style="font-size:20px;"><span class="glyphicon glyphicon-print" style="font-size:20px;"></span>  Create Invoice</a></li>
<li><a href="#viewinvoice" data-toggle="tab" style="font-size:20px;"><span class="glyphicon glyphicon-list-alt" style="font-size:20px;"></span>  View Invoice</a></li>
</ul>
<div class="tab-content table-responsive" style="margin-top:140px;">
.
.
.
.
.
</asp:Content>
现在是 Site.js 文件，其中有 js 代码
/* blur on modal open, unblur on close */
$('#aboutsbaims').on('show.bs.modal', function () {
$('#mycontent').addClass('blur');
});
$('#aboutsbaims').on('hide.bs.modal', function () {
$('#mycontent').removeClass('blur');
});
请帮我处理这段代码。为什么我的背景没有变得模糊？
实际上，当我在 id mycontent 的 div 标签中放置一个类时，它确实会变得模糊，但我希望它在模态显示和隐藏事件中变得模糊。任何帮助将不胜感激。我是编程新手。请帮忙。
【问题讨论】：
-
我从一个工作小提琴中找到了 site.js 代码。
-
好像一切正常。
-
此代码是否在 mycontent id 中添加模糊类
标签： javascript jquery asp.net twitter-bootstrap modal-dialog