1

首先,如果对于那些有更多经验的人来说这是一个非常简单的问题,我深表歉意,但我对此有点陌生,所以我希望有人可以帮助我。

我正在尝试在单击按钮时实现一个 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/> &larr; 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">

我已经重建了几次页面,但我仍然得到同样的错误,但我不知道为什么。

我只是想知道是否有人可以看看这个,让我知道我哪里出错了?

谢谢并恭祝安康

4

1 回答 1

5

我没有看到带有 ID 的 div jQueryDeleteConfirmationModalWindow。也许我错过了它?jQuery 对话框在现有 div 上执行。

http://jqueryui.com/demos/dialog/

<div id="jQueryDeleteConfirmationModalWindow">ARE YOU SURE???</div>

您的onlclick事件处理程序应调用函数名称

<input type="button" onclick="showDialog()" ... />

那么你的 JS 将以这种方式访问​​它

function showDialog(){
    $("#jQueryDeleteConfirmationModalWindow").dialog({...});
}
于 2012-04-24T16:08:56.267 回答