1
首先，我很抱歉如果对于那些有更多经验的人来说这是一个非常简单的问题，但是我对此有点新，所以我希望有人能够帮助我。jQuery Modal确认
我试图实现一个按钮单击后的jQuery模式确认框。这在下面的脚本中所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<script type="text/javascript">
var deleteTheSelectedUrl = '';
$(document).ready(function() {
// create the jQuery modal window and set autoOpen to false
$("#jQueryDeleteConfirmationModalWindow").dialog({
title: "Delete Confirmation",
autoOpen: false, // set this to false so we can manually open it
dialogClass: "jQueryDeleteConfirmationModalWindow",
closeOnEscape: false,
draggable: false,
width: 460,
height: 260,
modal: true,
buttons: {
"Yes, I'm sure": function() {
$(this).dialog("close");
if('' != jQuery.trim(deleteTheSelectedUrl)) {
window.location = deleteTheSelectedUrl;
}
},
Cancel: function() {
$(this).dialog("close");
}
},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
// bind the loading screen to each delete link, assuming you have some kind of way to select them via jQuery
jQuery('a.deleteConfirmation').click(function() {
deleteTheSelectedUrl = $(this).attr('href');
var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name
name = jQuery.trim(name);
$("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
$("#jQueryDeleteConfirmationModalWindow").dialog('open');
return false;
});
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<input name="username" type="hidden" id="username" value="IRHM73" />
<input name="locationid" type="hidden" id="locationid" value="1" />
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/>
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
//$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $galleryPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a><input type="radio" name="delete" /></li>
<p><span class="style4"><b>Image Name:</b> <?php echo htmlentities($xmlFile->getAttribute('originalname'));?> <br />
<b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
我遇到的问题是，当我点击“删除选定的图片”按钮，我收到此错误：'jQueryDeleteConfirmationModalWindow' is undefined at line 92这是本
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
我已经重建过几次这个页面，但是我仍然遇到同样的错误，但我不知道为什么。
我只是想知道是否有人可以看看这个请让我知道我要去哪里错了？
感谢和问候
仅供参考，有一个漂亮的jQuery插件称为[SimpleModal]（http://www.ericmmartin.com/projects/simplemodal/）。如果您将自己的模态作为学习练习实施，那么您仍然可以将此代码视为一个有用练习的例子。 – 2012-04-24 16:07:02
这不是错误发生的地方。这是onclick =“jQueryDeleteConfirmationModalWindow”的一行，这是因为没有这样的对象。 – 2012-04-24 16:10:25
非常感谢您花时间回复。你们都非常有帮助。亲切的问候 – IRHM 2012-04-24 17:17:10