Want to blur the background on twitter-bootstrap m

2019-09-01 14:31发布

站内问答 / JavaScript
770 3 6

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">&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>

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.

3条回答
Emotional °昔
2楼-- · 2019-09-01 14:53

Take a look at this: How to make modal dialog with blur background using 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);
}

You might have to change a few things in your code but this should work :D. Good luck

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
3楼-- · 2019-09-01 14:54

Your code looks correct. You can see similar code working without issue here: http://www.bootply.com/74705 (click on bottom panel to see the blur effect triggering).

The best way to debug this is put breakpoint on the .addClass and .removeClass lines using Chrome Developer Tools. This will tell you if events are actually firing or not. Possible reasons this may not be working...

  1. The blur class is not properly defined.
  2. You might need to apply blur class at higher level (for example, try applying to document.body and see if works). This might be reason if your events are firing but has no effect.
  3. You might need to wrap your event handle in JQuery's doumentReady event. This is very likely cause if your events are not firing at all. See http://api.jquery.com/ready/.

If none of these helps then I suggest you create a stripped down version of HTML and JS and post it at JSBin.com and someone would be able to help much more quickly.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
4楼-- · 2019-09-01 15:10 

/* 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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)