jQuery模式確認打開加載

我對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 href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <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> 
    <style type="text/css"> 
<!-- 
.style1 { 
    font-size: 14px; 
    margin-right: 110px; 
} 
.style4 {font-size: 12px} 
--> 
    </style> 
    <script type="text/javascript"> 
    $(function showdialog() { 
     // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
     $("#dialog:ui-dialog").dialog("destroy"); 

     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:160, 
      modal: false, 
      buttons: { 
       "Delete image": function() { 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 
    </script> 


</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;?> 
      <input name="deleteimage" type="button" value="Delete Selected Image" onclick="showdialog()" /> 
      <div class="demo"> 
      <div class="inner"> 
       <div class="container"> 
       <div class="gallery"> 
        <ul class="gallery-image-list"> 
        <?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'); 
          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source')); 
          $thumbnail = $thumbnailsPath . 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><?php echo "<input type='radio' name='del' value='{$name}' />"?></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 id="dialog-confirm" title="Delete This Image?"> 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This image will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 
    </div> 
     <div class="aB-a">  </div> 
     </div> 
    </div> 
    </div> 
    </form> 
</body> 
</html>

我遇到的問題是，在打開的對話框在頁面加載，而我希望它只是出現在點擊一個按鈕。我有對話框打開點擊按鈕，但我無法找到任何停止打開頁面加載。

我已經瀏覽了jQuery文檔，沒有什麼可以看到的，讓您可以選擇更改此設置。

我只是想知道是否有人可以看看這個請讓我知道我要去哪裏錯了？

非常感謝和問候

來源

2012-04-25 IRHM

從你的函數聲明刪除$。您不需要使用jQuery來定義常規函數。

$(function showdialog() { ... });

應該

function showdialog() { ... }

來源

2012-04-25 14:54:04

這是偉大的。非常感謝您的幫助。 – IRHM 2012-04-25 15:02:36

添加類「隱藏」的CSS和股利對話框（像這樣）：

.hide{ 
    display: none !important; 
} 


<div id="dialog-confirm" class="hide" title="Delete This Image?">

來源

2012-04-25 14:57:34

嗨，非常感謝您花時間回覆替代解決方案。我會保留這個以備後用。親切的問候 – IRHM 2012-04-25 15:02:12

jQuery模式確認打開加載

回答

相關問題