JavaScript 不起作用(自定义对话框)
本文关键字:对话框 自定义 不起作用 JavaScript | 更新日期: 2023-09-27 18:33:06
按照本教程,
自定义对话框
我已经为 ASP.Net 页面提供了 3 个 asp 内容占位符,他们猜他们已经在使用某种脚本,这在这里没有问题。
问题是,我能够使用"OnClientClick"属性调用函数,但该函数在不同的.js文件中具有更多函数。如果我在调用其他函数之前放置警报,它可以工作,但在它进入我的第一个函数之后就不行了。
教程列出了所有 javascript 代码,这是我在 ASP.Net 内容位置使用它的代码,
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>
<script type="text/javascript" language="JavaScript">
function ShowMessage()
{
alert("1");
SetText('Yes','No');
alert("2");
DisplayConfirmMessage('are you sure',180,90)
SetDefaultButton('btnConfOK');
return false;
}
</script>
<div id="divConfMessage" runat="server" style="BORDER-RIGHT:black thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid">
<div style="BACKGROUND-COLOR: #6699cc;TEXT-ALIGN: center" id="confirmText">
</div>
<div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
</div>
<div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
<asp:Button ID="btnConfOK" Runat="server" Text="OK"></asp:Button>
<asp:Button ID="btnConfCancel" Runat="server" Text="Cancel"></asp:Button>
</div>
</div>
<hr />
<asp:Button ID="btDelete" runat="server"
OnClientClick="ShowMessage();"
Text="Delete" UseSubmitBehavior="False" Width="200px" />
我删除了目前拥有的其他一些控件,它显示警报"1"但未达到"2",
这是自定义对话框脚本,
var divWidth = '';
var divHeight = '';
var txtFirstButton = 'OK';
var txtSecondButton = 'Cancel'
function DisplayConfirmMessage(msg,width,height)
{
// Set default dialogbox width if null
if(width == null)
divWidth = 180
else
divWidth = width;
// Set default dialogBox height if null
if(height == null)
divHeight = 90
else
divHeight = height;
// Ge the dialogbox object
var divLayer = document.getElementById('divConfMessage');
// Set dialogbox height and width
SetHeightWidth(divLayer)
// Set dialogbox top and left
SetTopLeft(divLayer);
// Show the div layer
divLayer.style.display = 'block';
// Change the location and reset the width and height if window is resized
window.onresize = function() { if(divLayer.style.display == 'block'){ SetTopLeft(divLayer); SetHeightWidth(divLayer)}}
// Set the dialogbox display message
document.getElementById('confirmText').innerText = msg;
}
function SetTopLeft(divLayer)
{
// Get the dialogbox height
var divHeightPer = divLayer.style.height.split('px')[0];
// Set the top variable
var top = (parseInt(document.body.offsetHeight)/ 2) - (divHeightPer/2)
// Get the dialog box width
var divWidthPix = divLayer.style.width.split('px')[0];
// Get the left variable
var left = (parseInt(document.body.offsetWidth)/2) - (parseInt(divWidthPix)/2);
// set the dialogbox position to abosulute
divLayer.style.position = 'absolute';
// Set the div top to the height
divLayer.style.top = top
// Set the div Left to the height
divLayer.style.left = left;
}
function SetHeightWidth(divLayer)
{
// Set the dialogbox width
divLayer.style.width = divWidth + 'px';
// Set the dialogbox Height
divLayer.style.height = divHeight + 'px'
}
function SetText(txtButton1,txtButton2)
{
// Set display text for the two buttons
if(txtButton1 == null)
document.getElementById('btnConfOK').innerText = txtFirstButton;
else
document.getElementById('btnConfOK').innerText = txtButton1;
// Set display text for the two buttons
if(txtButton2 == null)
document.getElementById('btnConfCancel').innerText = txtSecondButton;
else
document.getElementById('btnConfCancel').innerText = txtButton2;
}
function SetDefaultButton(defaultButton)
{
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
刚刚注意到它上升到这个功能
function SetText(txtButton1,txtButton2)
{
alert("2");
// Set display text for the two buttons
然后它丢失了,它试图从 txtButton1 获取值,这可能意味着我的 ASPX 页面中的 Div 标签没有正确呈现:(
if(txtButton1 == null)
document.getElementById('btnConfOK').innerText = txtFirstButton;
else
document.getElementById('btnConfOK').innerText = txtButton1;
alert("3");
**编辑*如果我删除 SetText 函数,它确实会显示,但它不会触发我的"OnClick"方法,只是刷新页面***
<asp:Button ID="Button1" runat="server" CausesValidation="False" CssClass="gradientbutton"
OnClick="btDelete_Click" OnClientClick="ShowMessage();this.disabled=true;this.value='Wait...';"
Text="Delete" UseSubmitBehavior="False" Width="200px" />
刚刚意识到在页面上出现错误,即使它显示确认框
说 findElementbyid(..( 是空或不是对象
我认为这个
document.getElementById('btnConfOK')
应使用 ClientID 而不是实际 ID,因为它是 .NET 控件,ID 将被重写。所以应该是
document.getElementById('<%=btnConfOK.ClientID%>')
也许不知何故,src 被添加到 url 中没有"/"......
更改此行:
<script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>
自:
<script type="text/javascript" language="JavaScript" src="./CustomDialog.js"></script>
如果这不起作用,则代码存在问题,或者您将其放置在另一个位置 0_0