想要模糊twitter-bootstrap模态加载的背景。 javascript代码无效

的Site.Master

             .style1 { font-family: Vani; }    
 
 
 
 
 
 
  
 
 
 
 
 
 
   

WebForm2.aspx（文件的一部分）

    
 
 
 
 × 
 
 
  
 
 
About&nbsp SBAIMS
 
 
 
 
 
Shantinath Book Agency Inventory Management System (SBAIMS) 
 
 
&copy All Copyrights Reserved By: Shantinath Book Agency&nbsp&nbsp Okay! &nbsp&nbsp
 
 
 
 
  
 
 
 
 × 
Logout Confirmation
 
 
 
 Are you sure you want to Logout ? 

 
 
  No 
 
 
 
  
 
 
 
 
 
SBAIMS
 
 
 
  
 
Change Password
 
User Manual
 
About &nbsp SBAIMS
 
Logout
 
 
 
 
 
 
 
 
 
 
&nbsp Add to Inventory
 
&nbsp Update Inventory
 
&nbsp View Inventory
 
&nbsp Create Invoice
 
&nbsp View Invoice
 
 
 . . . . .  

现在是其中有js代码的Site.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标签中放置一个类时，它确实变得模糊，但我希望它在模态显示和隐藏事件上变得模糊。 任何帮助将不胜感激。 我是编程新手。 请帮忙。

Answer 1

 /* 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'); }); }); 

Answer 2

看看这个： 如何使用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。 祝好运

Answer 3

您的代码看起来正确。 您可以在此处看到类似的代码无问题： http ： //www.bootply.com/74705 （单击底部面板可查看模糊效果触发）。

调试此方法的最佳方法是使用Chrome开发者工具在.addClass和.removeClass行上放置断点。 这将告诉您事件是否实际触发。 这可能不起作用的可能原因……

1. 模糊类未正确定义。
2. 您可能需要在更高级别应用模糊类（例如，尝试应用于document.body并查看是否有效）。 这可能是您的事件被解雇但没有效果的原因。
3. 您可能需要在JQuery的doumentReady事件中包装事件句柄。 如果您的事件根本没有发射，这很可能会导致。 见http://api.jquery.com/ready/ 。

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