Wollen, um den hintergrund Weichzeichnen auf twitter-bootstrap-modal laden. Der javascript-code funktioniert nicht
Website.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 (Teil der Datei)
<%@ 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>und jetzt die Site.js - Datei, in der es den 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');
});Bitte helfen Sie mir mit diesem code. Warum ist das nicht mein hintergrund nicht immer verwischt?
eigentlich, wenn ich eine Klasse in das div-tag id mycontent ist es nicht verschwommen, aber ich will es unscharf auf modal-und ausblenden-Ereignis. Jede Hilfe wird sehr geschätzt. Ich bin neu in der Programmierung. bitte helfen Sie.
- ich fand die site.js code aus einer funktionierenden Geige.
- Scheint alles ok ist.
- Ob dieser code hinzufügen blur-Klasse in mycontent-id oder nicht
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
JS:
HTML:
Werfen Sie einen Blick auf diese: Wie man modale dialog mit Unschärfe hintergrund mit Twitter Bootstrap?
Haben Sie vielleicht ein paar Dinge ändern in deinem code, aber dieser sollte funktionieren :D. viel Glück
Dein code sieht korrekt. Sehen Sie ähnlichen code funktioniert ohne Problem hier: http://www.bootply.com/74705 (klicken auf der Unterseite zu sehen, die Unschärfe-Effekt auslösen).
Der beste Weg, um debug-dies ist setzen Haltepunkt auf der .addClass und .removeClass Zeilen über Chrome Entwickler-Tools. Dies wird Ihnen sagen, wenn die Ereignisse tatsächlich feuern oder nicht. Mögliche Gründe, warum dies möglicherweise nicht funktioniert...
Wenn nichts davon hilft, dann schlage ich vor, Sie erstellen eine abgespeckte version von HTML und JS und schicken Sie es an JSBin.com und jemand wäre in der Lage zu helfen, sehr viel schneller.