想要模糊twitter引导程序模式加载的背景.javascript代码不起作用

站点。主

<%@ 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">&times;</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&nbsp 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;">&copy 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">&nbsp&nbsp<b> Okay! </b>&nbsp&nbsp</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">&times;</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 &nbsp 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>&nbsp 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>&nbsp 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>&nbsp 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>&nbsp 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>&nbsp 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');
});

请帮我处理这个代码。为什么我的背景不模糊？实际上，当我把一个类放在idmycontent的div标记中时，它确实会变得模糊，但我希望它在模态显示和隐藏事件中变得模糊。任何帮助都将不胜感激。我是编程新手。请帮忙。

/* blur on modal open, unblur on close */
$(function () {
$('#aboutsbaims').on('show.bs.modal', function () {
$('#mycontent').addClass('blur');
});
$('#aboutsbaims').on('hide.bs.modal', function () {
$('#mycontent').removeClass('blur');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

看看这个：如何使用Twitter Bootstrap制作模糊背景的模态对话框？

body.modal-open .supreme-container{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}

您可能需要更改代码中的一些内容，但这应该有效：D。祝好运

您的代码看起来是正确的。您可以在此处看到类似的代码正常工作而没有问题：http://www.bootply.com/74705(点击底部面板查看模糊效果触发)。

调试它的最佳方法是使用Chrome开发工具在.addClass和.removeClass行上设置断点。这将告诉你事件是否真的发生了。可能的原因这可能不起作用。。。

模糊类定义不正确
您可能需要在更高级别应用模糊类(例如，尝试应用到document.body，看看是否有效)。如果您的事件正在启动但没有效果，这可能是原因
您可能需要将事件句柄封装在JQuery的doumentReady事件中。如果你的活动根本没有启动，这很可能是原因。看见http://api.jquery.com/ready/.

如果这些都没有帮助，那么我建议你创建一个HTML和JS的精简版本，并将其发布在JSBin.com上，这样别人就能更快地提供帮助。

相关内容

最新更新

热门标签：