要模糊的Twitter自举模式负载的背景。 JavaScript的code不工作 [英] Want to blur the background on twitter-bootstrap modal load. The javascript code is not working
本文介绍了要模糊的Twitter自举模式负载的背景。 JavaScript的code不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
的Site.Master 的
＆LT;％@主语言=C＃AutoEventWireup =真codeBehind =Site.master.cs继承=WebApplication1.SiteMaster％GT;！＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Strict标准// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtmlXML：LANG =ENGT＆;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT; ＆LT;脚本的src =/ JS / jQuery的-2.1.0.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/ JS / bootstrap.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ Site.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;链接rel =stylesheet属性HREF =CSS / bootstrap.css类型=文/ CSS/＆GT;
＆LT;链接rel =stylesheet属性HREF =样式/的site.css类型=文/ CSS/＆GT; ＆LT; ASP：的ContentPlaceHolder ID =HeadContent=服务器＆GT;
＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT;风格类型=文/ CSS＆GT;
.style1
{
FONT-FAMILY：瓦尼;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式=服务器＆GT;
＆LT; DIV CLASS =页＆GT;
＆LT; DIV CLASS =头＆GT;
＆LT; DIV CLASS =标题＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =主＆GT;
＆LT; ASP：的ContentPlaceHolder ID =日程地址搜索Maincontent=服务器/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =清除＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =页脚＆GT; ＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
WebForm2.aspx（该文件的一部分）的
＆LT;％@页标题=LANGUAGE =C＃的MasterPageFile =〜/的Site.MasterAutoEventWireup =真codeBehind =WebForm2.aspx。 CS继承=WebApplication1.WebForm2％GT;＆LT; ASP：内容ID =WebForm2ContentPlaceHolderID =日程地址搜索Maincontent=服务器＆GT; ＆LT;！ - 1）关于SBAIMS模态 - ＆GT;
＆LT; DIV CLASS =模式变脸ID =aboutsbaims数据的背景=静态的tabindex =1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式-对话框＆GT;
＆LT; DIV CLASS =模式内容＆GT; ＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT;表类=表格 - 无边界WIDTH = 100％GT;
＆所述; TR＆GT;
＆LT; TD风格=WIDTH：40％对齐=中心＆GT;
＆所述; IMG SRC =sbalarge.png类=IMGALT =SBA_Logo高度= 100宽度= 180＆GT;
＆LT; / TD＆GT;
＆LT; TD风格=WIDTH：60％align =left＆GT;
＆LT; H2＆gt;关于＆安培; NBSP S.B.A.I.M.S.＆LT; / H＆GT;
＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =模体＆GT;
＆LT; H5的风格=文本对齐：理由;行高：的22px;＆GT;＆LT; B＆GT; Shantinath书处的库存管理系统（S.B.A.I.M.S。）LT; / B＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =模式英尺黑色＆GT;
＆LT; H5 align =left的风格=COLOR：＃E2E2E2;＆GT;＆放大器;复制保留通过所有版权：Shantinath图书局与LT;跨度风格=显示：inline-block的;宽度：60像素;＆GT;＆LT; / SPAN＆GT;＆LT;按钮式=按钮ID =mdl1okay级=BTN BTN-INFO数据解雇=模式的风格=行高度：0.6;背景颜色：＃196CA3＆GT;＆放;＆NBSP放大器;＆NBSP LT; b＆GT;好的！ ＆LT; / B＆GT;＆安培;＆NBSP放大器;＆NBSP LT; /按钮＆GT;＆LT; / H5＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 2）注销确认模态 - ＆GT;
＆LT; DIV CLASS =模式变脸ID =logoutconfirm的tabindex =1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式-对话框＆GT;
＆LT; DIV CLASS =模式内容＆GT; ＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H4类=模式标题＆GT;注销确认＆LT; / H4＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =模体＆GT;
＆LT;＆H5 GT;你确定要注销？ ＆LT; / H5＆GT;＆LT; BR /＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =模式躯＆GT;
＆LT; ASP：按钮的CssClass =BTN BTN-主要文本=是=服务器ID =yeslogout的onclick =yeslogout_Click＆GT;＆LT; / ASP：按钮＆GT;
＆LT;按钮式=按钮级=BTN BTN-危险数据解雇=模式＆GT否LT; /按钮＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - ********所有情态动词*******结束*************************** - ＆GT;＆LT; DIV ID =为myContent＆GT;
＆LT; DIV CLASS =表响应＆GT;
＆LT;表类=table表 - 无边界表浓缩黑表响应的风格=的位置是：固定;宽度：100％; z-index的：2;＆GT;
＆所述; TR＆GT;
＆LT; TD WIDTH =24％＆GT;＆LT; IMG SRC =sbalogo.png的风格=垂直对齐：中;填充顶：的3px;填充左：3PX级=IMG IMG响应 ALT =SBA_Logo高度= 55宽度= 100〕及下; / TD＆GT;
＆LT; TD WIDTH =52％对齐=中心＆GT;＆LT; p风格=COLOR：＃E2E2E2;垂直对齐：中间; FONT-SIZE：35px;＆GT; SBAIMS＆LT; / P＆GT;＆LT; / TD＆GT;
＆LT; TD WIDTH =24％对齐=正确的风格=填充顶：15px的＆GT;
＆LT; UL类=uldl＆GT;
＆LT;李班=下拉菜单的风格=填充底：8像素，填充右：10px的＆GT;
＆LT; A HREF =级=下拉菜单，切换数据切换=下拉菜单＆GT;＆LT;跨度类=glyphicon glyphicon，齿轮的风格=COLOR：＃E2E2E2; FONT-SIZE：30PX; vertical-对齐：中间;＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
＆LT; UL类=下拉菜单的风格=填充顶：10px的;填充底：10px的;＆GT;
＆LT;李align =left级=ddliID =LI1＆GT;＆LT;数据拨动=模态的href =＃的ChangePassword＆GT;修改密码＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李align =left级=ddliID =LI2＆GT;＆LT; A HREF =＃＆gt;用户手册＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李align =left级=ddliID =LI3＆GT;＆LT;数据拨动=模态的href =＃aboutsbaims＆gt;关于＆安培; NBSP SBAIMS＆LT; / A＆GT;＆LT; /立GT;
＆LT;李align =left级=ddliID =合谷＆GT;＆LT;数据拨动=模态的href =＃logoutconfirm＆GT;退出＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =导航＆GT;
＆LT; UL类=净值资产净值的选项卡导航对齐prntnvtabs＆GT;
＆LT;李班=主动＆GT;＆LT; A HREF =＃addtoinventory数据切换=标签的风格=FONT-SIZE：20px的;＆GT;＆LT;跨度类=glyphicon glyphicon加的风格=FONT-SIZE：20px的;＆GT;＆LT; / SPAN＆GT;＆安培; NBSP添加到库存和LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃updateinventory数据切换=标签的风格=FONT-SIZE：20px的;＆GT;＆LT;跨度类=glyphicon glyphicon箭头向上的风格=字体 - 大小：20像素;＆GT;＆LT; / SPAN＆GT;＆安培; NBSP更新清单＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃viewinventory数据切换=标签的风格=FONT-SIZE：20px的;＆GT;＆LT;跨度类=glyphicon glyphicon眼开的风格=字体 - 大小：20像素;＆GT;＆LT; / SPAN＆GT;＆安培; NBSP查看库存和LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃createinvoice数据切换=标签的风格=FONT-SIZE：20px的;＆GT;＆LT;跨度类=glyphicon glyphicon打印的风格=FONT-SIZE： 20像素;＆GT;＆LT; / SPAN＆GT;＆安培; NBSP创建发票＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃viewinvoice数据切换=标签的风格=FONT-SIZE：20px的;＆GT;＆LT;跨度类=glyphicon glyphicon列表-ALT的风格=字体 - 大小：20像素;＆GT;＆LT; / SPAN＆GT;＆安培; NBSP查看发票＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; DIV CLASS =标签内容表响应的风格=的margin-top：140px;＆GT;。
。
。
。
。
＆LT; / ASP：内容＆GT;
和现在的 Site.js 的文件，其中有JS的code
/ *模态开模糊，unblur上接近* /
$（'＃aboutsbaims'）。在（'show.bs.modal'，函数（）{
$（'＃为myContent'）addClass（'模糊'）。
}）;$（'＃aboutsbaims'）。在（'hide.bs.modal'，函数（）{
$（'＃为myContent'）removeClass移除（'模糊'）。
}）;
请帮我这个code。为什么不是我的背景没有得到模糊？
实际上，当我在ID的div标签把一个类为myContent 它得到模糊，但我想让它变得模态显示模糊和隐藏事件。任何帮助将大大AP preciated。我是新来编程。请帮助。
解决方案
/ *模态开模糊，unblur上接近
$（函数（）{ $（'＃aboutsbaims'）。在（'show.bs.modal'，函数（）{
$（'＃为myContent'）addClass（'模糊'）。
}）; $（'＃aboutsbaims'）。在（'hide.bs.modal'，函数（）{
$（'＃为myContent'）removeClass移除（'模糊'）。
}）;
}）; * /
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 (part of the file)
<%@ 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>
and now the Site.js file in which there is the js code
/* 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');
});
Please help me with this code. Why isn't my background not getting blurred?
actually when i put a class in the div tag of id mycontent it does get blurred but i want it to get blurred on modal show and hide event. Any help will be greatly appreciated. I am new to programming. please help.
解决方案
/* 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');
});
}); */
这篇关于要模糊的Twitter自举模式负载的背景。 JavaScript的code不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
