我有一个页面，其中div显示一条带有span标签“x”的消息。当用户点击x时，div隐藏。它工作正常，js代码存在于外部脚本文件中。现在我在这个页面中使用了一些内联jscript而且div不再适用了。我也尝试在外部文件中使用这个内联，但即使只是在页面上调用文件名也会使div失效。这是我的页面代码。 'msgpanel'是出现和隐藏的div。
<%@ Page Title="" Language="C#" MasterPageFile="~/mCSSv2.Master" AutoEventWireup="true"
CodeBehind="WU_adddetails.aspx.cs" Inherits="mCSSv2.WU_adddetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="/js/popup.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/pasteimage.js"></script>
<style type="text/css">
#upload_image {
width: 300px;
height: 300px;
background-color: #F5F6F7;
border-radius: 10px;
border: 2px solid #E5E5E5;
text-align: center;
margin: 15px;
}
#upload_image img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin-top: 50%;
transform: translateY(-50%);
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
.modal {
display: none;
position: absolute;
top: 0px;
left: 0px;
background-color: black;
z-index: 100;
opacity: 0.8;
filter: alpha(opacity=60);
-moz-opacity: 0.8;
min-height: 100%;
}
#divImage {
display: none;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
background-color: White;
height: 550px;
width: 600px;
padding: 3px;
border: solid 1px black;
}
</style>
<!-- Begin of #main-content -->
<div id="main-content">
<div class="container_12">
<div id="msgpanel" runat="server">
<asp:Literal ID="msg" runat="server" Visible="false"></asp:Literal>
</div>
<%--<div class="grid_12">
<h1>
Western Union Customer & Transaction Details</h1>
<p>
</p>
</div>--%>
<div class="grid_12">
<div class="block-border">
<div class="block-header">
<h1>
Add Info</h1>
<span></span>
</div>
<div class="_100">
<p>
</p>
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<img id="imgLoader" alt="" src="images/loader.gif" />
<img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 590px" />
</td>
</tr>
<tr>
<td align="center" valign="bottom">
<input id="btnClose" type="button" value="close" onclick="HideDiv()" />
</td>
</tr>
</table>
</div>
<div id="upload_image" style="float:center; margin-top:30px; margin-left:800px; height:100px; width:150px; position:absolute;">
<img id="imgDemo" runat="server" alt="nadira image" style="margin-top:50px" src="js/Paste.png" ondblclick="return LoadDiv(this.src);" />
<input type="hidden" name="photo" />
<p runat="server" id="uploadMsg" visible="false"></p>
<%--<button type="submit" class="btn">Submit</button>--%>
</div>
<div id="divBackground" class="modal"></div>
<div class="block-border">
<table>
<tr>
<td>
CNIC no. <br />
<asp:TextBox ID="txt_cnic" runat="server" CssClass="uniform-button hover" CausesValidation="True" Rows="1" MaxLength="13" Margin-left="-2.5px" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);"
/>
<asp:LinkButton ID="Searchbtn" runat="server" Text="Search" CausesValidation="false" onclick="Searchbtn_Click"></asp:LinkButton><br />
<asp:RegularExpressionValidator id="rv1_txt_cnic" ControlToValidate="txt_cnic" ValidationExpression="\d+" Display="Dynamic" EnableClientScript="true" SetFocusOnError="True" Font-Italic="True" ErrorMessage="Please enter numbers only" runat="server" />
<asp:RequiredFieldValidator ID="rv2_" runat="server" ControlToValidate="txt_cnic" Display="Dynamic" ErrorMessage="Field cannot be empty" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator><br /> </td>
<td>
Nadira
Verisys Image<br />
<%--<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button class="button" ID="btnUpload" onClick="btnUpload_Click"
runat="server" Text="Upload" Width="60px" CausesValidation="False"></asp:Button>--%>
<%--<asp:Button class="button" ID="save_btn" onClick="savebtn_Click"
runat="server" Text="Save" Width="60px" CausesValidation="False"></asp:Button>--%>
</td>
</tr>
</table>
<!--first div -->
<table>
<tr>
<td>
<label for="textfield" style="margin-top: -1px">
Sender Name </label><br />
<asp:TextBox ID="txt_sender" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="50" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt_sender" Display="Dynamic" ErrorMessage="Field cannot be empty" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator><br />
</td>
<td>
<label for="textfield">
Receiver Name</label><br />
<asp:TextBox ID="txt_rcvr" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="50" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txt_rcvr" Display="Dynamic" ErrorMessage="Field cannot be empty" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator><br />
</td>
</tr>
</table>
<table>
<tr>
<td>
<label for="textfield">
CNIC Expiry Date (Format:mm-dd-yyyy)</label><br />
<asp:TextBox ID="txt_expirydt" runat="server" CssClass="uploader" CausesValidation="True" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /> <br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator_date" runat="server" ControlToValidate="txt_expirydt" Display="Dynamic" ErrorMessage="* Select Date" SetFocusOnError="True" InitialValue="" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txt_expirydt" ErrorMessage="Date was in incorrect format" ValidationExpression="^(0[1-9]|1[0-2])\-(([0-9])|([0-2][0-9])|([3][0-1]))\-\d{4}$">
</asp:RegularExpressionValidator>
</td>
<td>
<label for="textfield">
CNIC Issue Date (Format:mm-dd-yyyy)</label><br />
<asp:TextBox ID="txt_issuedt" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="13" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<%--<asp:ImageButton ID="ImageButton2" runat="server" Height="17px" ImageUrl="~/img/calendar.png" onclick="ImageButton2_Click" Width="21px" CausesValidation="False" />--%>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="txt_issuedt" Display="Dynamic" ErrorMessage="* Select Date" SetFocusOnError="True" InitialValue="" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="txt_issuedt" ErrorMessage="Date was in incorrect format" ValidationExpression="^(0[1-9]|1[0-2])\-(([0-9])|([0-2][0-9])|([3][0-1]))\-\d{4}$">
</asp:RegularExpressionValidator>
<%--<asp:Calendar ID="Calendar2" runat="server" Visible="False" Width="375px"
BackColor="White" CaptionAlign="Top" CellPadding="3" CssClass="center"
onselectionchanged="Calendar2_SelectionChanged">
<SelectorStyle BackColor="#CCCCCC" />
<TitleStyle HorizontalAlign="Center" />
</asp:Calendar></p>--%>
</td>
</tr>
</table>
<table>
<tr>
<td>
<label for="textfield">
Date of Birth (Format:mm-dd-yyyy)</label><br />
<asp:TextBox ID="txt_dob" runat="server" placeholder="" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="13" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<%--<asp:ImageButton ID="ImageButton3" runat="server" Height="17px" ImageUrl="~/img/calendar.png" onclick="ImageButton3_Click" Width="21px" CausesValidation="False" />--%>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" ControlToValidate="txt_dob" Display="Dynamic" ErrorMessage="* Select Date" SetFocusOnError="True" InitialValue="" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator6" runat="server" ControlToValidate="txt_dob" ErrorMessage="Date was in incorrect format" ValidationExpression="^(0[1-9]|1[0-2])\-(([0-9])|([0-2][0-9])|([3][0-1]))\-\d{4}$">
</asp:RegularExpressionValidator>
<%--<asp:Calendar ID="Calendar3" runat="server" Visible="False" Width="375px"
BackColor="White" CaptionAlign="Top" CellPadding="3" CssClass="center"
onselectionchanged="Calendar3_SelectionChanged">
<SelectorStyle BackColor="#CCCCCC" />
<TitleStyle HorizontalAlign="Center" />
</asp:Calendar>--%>
</td>
<td>
<label for="textfield">
Mobile No.</label><br />
<asp:TextBox ID="txt_mob" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="11" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<asp:RegularExpressionValidator id="RegularExpressionValidator4" ControlToValidate="txt_mob" ValidationExpression="\d+" Display="Dynamic" EnableClientScript="true" SetFocusOnError="True" Font-Italic="True" ErrorMessage="Please enter numbers only" runat="server"
/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" ControlToValidate="txt_mob" Display="Dynamic" ErrorMessage="Field cannot be empty" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</div>
<!--first div end -->
<div class="block-border">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td style="width:272px;">
<label for="textfield">
Bank Name </label>
<asp:DropDownList Font-Size="Small" ID="ddl_bank" runat="server" AutoPostBack="true" AppendDataBoundItems="True" onselectedindexchanged="ddl_bank_SelectedIndexChanged" onkeydown="return (event.keyCode!=13);">
<asp:ListItem Value="0" Selected="True" Text="Select Bank Name"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" InitialValue="0" ControlToValidate="ddl_bank" Display="Dynamic" ErrorMessage="Please select a bank" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td style="width:270px">
<label for="textfield">
Account Type </label>
<asp:RadioButtonList Font-Size="Small" ID="rad_acctype" runat="server" TextAlign="Right" AppendDataBoundItems="True" RepeatDirection="Horizontal" onkeydown="return (event.keyCode!=13);">
<asp:ListItem Value="IBAN" Text="IBAN"></asp:ListItem>
<asp:ListItem Value="BBAN" Text="BBAN"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" InitialValue="0" ControlToValidate="rad_acctype" Display="Dynamic" ErrorMessage="Please Select Account Type" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td>
<label for="textfield">
WU Available Bal</label><br />
<asp:TextBox ID="txt_wubal" runat="server" CssClass="uploader" Rows="1" Width="270px" ReadOnly="True" Font-Size="Small" Enabled="false" onkeydown="return (event.keyCode!=13);" />
</td>
</tr>
</table>
<table>
<tr><br />
<td style="width:272px">
<label for="textfield">
Account no.</label>
<asp:DropDownList Font-Size="Small" ID="ddl_accno" runat="server" AutoPostBack="True" AppendDataBoundItems="true" onselectedindexchanged="ddl_accno_SelectedIndexChanged" onkeydown="return (event.keyCode!=13);">
<asp:ListItem Value="0" Selected="True" Text="Select Account No"></asp:ListItem>
<asp:ListItem Value="1" Text="Other"></asp:ListItem>
</asp:DropDownList><br />
<asp:TextBox ID="txt_accno" runat="server" CssClass="uniform-button hover" CausesValidation="True" Rows="1" MaxLength="24" Width="240px" Font-Size="Small" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" InitialValue="0" ControlToValidate="ddl_accno" Display="Dynamic" ErrorMessage="Please select an account" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" InitialValue="0" ControlToValidate="txt_accno" Display="Dynamic" ErrorMessage="Please enter account number" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<%--<asp:RegularExpressionValidator id="RegularExpressionValidator1"
ControlToValidate="txt_accno" ValidationExpression="\d+" Display="Dynamic"
EnableClientScript="true" SetFocusOnError="True" Font-Italic="True" ErrorMessage="Please enter numbers only" runat="server"/>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator4" runat="server"
ControlToValidate="txt_accno" Display="Dynamic" ErrorMessage="Field cannot be empty"
SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>--%>
</td>
<td>
<label for="textfield">
Beneficiary Account Title</label>
<asp:Label ID="tft" runat="server" Text=" [Title Fetch Status]" style="font-style:italic"></asp:Label><br />
<asp:TextBox ID="txt_acctitle" runat="server" CssClass="uploader" CausesValidation="True" Enabled="False" Width="270px" ReadOnly="True" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<asp:LinkButton ID="fetch" runat="server" Text="Click to Fetch Title" CausesValidation="False" onclick="fetch_Click"></asp:LinkButton>
<asp:label ID="Label1" runat="server" Visible="false">
Beneficiary Account Title not found </asp:label><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="txt_acctitle" Display="Dynamic" ErrorMessage="Field cannot be empty" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td>
<label for="textfield">
Amount to Transfer</label><br />
<asp:TextBox ID="txt_amt" runat="server" style="text-align:right" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="06" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<asp:RegularExpressionValidator id="RegularExpressionValidator2" ControlToValidate="txt_amt" ValidationExpression="\d+" Display="Dynamic" EnableClientScript="true" SetFocusOnError="True" Font-Italic="True" ErrorMessage="Please enter numbers only" runat="server"
/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txt_amt" Display="Dynamic" ErrorMessage="Please Enter a Valid Transfer Amount" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<br />
<asp:CompareValidator ID="CompareValidator1" Operator="LessThan" Type="Integer" ControlToValidate="txt_amt" ControlToCompare="txt_wubal" ErrorMessage="Insufficient amount in WU account" runat="server" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<label for="textfield">
MTCN No.</label><br />
<asp:TextBox ID="txt_mtcn" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="10" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" /><br />
<asp:RegularExpressionValidator id="RegularExpressionValidator3" ControlToValidate="txt_mtcn" ValidationExpression="\d+" Display="Dynamic" EnableClientScript="true" SetFocusOnError="True" Font-Italic="True" ErrorMessage="Please enter numbers only" runat="server"
/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="txt_mtcn" Display="Dynamic" ErrorMessage="Field cannot be empty" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td>
<label for="textfield">
Purpose of Payment</label><br />
<asp:DropDownList Font-Size="Small" ID="ddl_pop" runat="server" AutoPostBack="true" Width="270px" AppendDataBoundItems="true" onselectedindexchanged="ddl_pop_SelectedIndexChanged" onkeydown="return (event.keyCode!=13);">
<asp:ListItem Value="0" Selected="True" Text="Select Purpose "></asp:ListItem>
<asp:ListItem Value="1" Text="Other"></asp:ListItem>
<asp:ListItem Value="2" Text="Test "></asp:ListItem>
</asp:DropDownList><br />
<asp:TextBox ID="txt_pop" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="50" Width="270px" Font-Size="Small" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" InitialValue="0" ControlToValidate="ddl_accno" Display="Dynamic" ErrorMessage="Please select an account" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" InitialValue="0" ControlToValidate="txt_accno" Display="Dynamic" ErrorMessage="Please enter account number" SetFocusOnError="True" Font-Italic="True" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td>
<label for="textfield">
Relationship with Beneficiary</label><br />
<asp:TextBox ID="txt_rel" runat="server" CssClass="uploader" CausesValidation="True" Rows="1" MaxLength="50" Width="270px" Font-Size="Small" onkeydown="return (event.keyCode!=13);" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<table>
<tr>
</tr>
</table>
</div>
</div>
<!-- first div closing-->
<br />
<div class="clear">
</div>
<div class="clear">
</div>
<div class="block-actions">
<ul class="actions-left">
<li>
<asp:Button ID="btnClear" CssClass="button" runat="server" Text="New Transaction" CausesValidation="False" onclick="btnClear_Click"></asp:Button>
</li>
</ul>
<%--<ul class="actions-left">
<li><asp:Button ID="save" CssClass="button" runat="server" Text="save"
CausesValidation="False"></asp:Button></li>
</ul>--%>
<ul class="actions-right">
<li>
<asp:Button ID="BtnExec" Text="Save" runat="server" CssClass="button" onclick="BtnExec_Click" OnClientClick="SetTarget();" CausesValidation="true" />
</li>
</ul>
<script type="text/javascript">
function SetTarget() {
document.forms[0].target = "_blank";
}
</script>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
</div>
<div class="clear">
</div>
<!--! end of #main-content -->
<asp:HiddenField ID="IDs" runat="server"></asp:HiddenField>
</asp:Content>
这是我的脚本文件，其中包含隐藏代码：
$(document).ready(function() {
/*
* Closable Alert Boxes
*/
$('span.hide').click(function() {
$(this).parent().slideUp();
});
(function($) {
$.pasteimage(function(value) {
$("#upload_image img").attr("src", value);
//add hidden input to form
var sourceSplit = value.split("base64,");
var sourceString = sourceSplit[1];
// Write base64-encoded string into input field
$("input[name='photo']").val(sourceString);
});
})(jQuery);
答案 0 :(得分：0)
也许asp.net渲染没有发生在你想要的地方。请做以下两件事：
将类添加到＆＃34; msgpanel＆＃34;格。
div id =＆＃34; msgpanel＆＃34;类=＆＃34; msDiv＆＃34; RUNAT =＆＃34;服务器＆＃34;
inScript，使用此类查找div并向上滑动
$（＆＃39; span.hide＆＃39;）。点击（function（）{
$('msDiv').slideUp();
}）;