个人中心
gpt4 book ai didi

javascript - 想要模糊 twitter-bootstrap 模式加载的背景。 JavaScript 代码不工作

转载 作者：行者123 更新时间：2023-12-02 17:42:24 29 4
gpt4 key购买 nike

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">&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');
});

请帮我解决这个代码。为什么我的背景没有变得模糊？实际上，当我将一个类放入 id mycontent 的 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>

关于javascript - 想要模糊 twitter-bootstrap 模式加载的背景。 JavaScript 代码不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22087261/

29 4 0
文章推荐： javascript - 为什么我的 jQuery 脚本只能在 Firefox 中运行？
文章推荐： perl - LibXML - 插入注释
文章推荐： sql - 计算 SQL Server 查询中的唯一行
文章推荐： javascript - Ruby on Rails : Manage array from client side in Rails application?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com