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 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 のドキュメントを調べましたが、この設定を変更するオプションを提供するものは何もありません。

誰かがこれを見て、どこが間違っているのか教えてください。

多くの感謝と敬意

4

2 に答える 2

0

$関数宣言から を削除します。通常の関数を定義するために jQuery を使用する必要はありません。

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

する必要があります

function showdialog() { ... }
于 2012-04-25T14:54:04.910 に答える
0

css と div ダイアログにクラス "hide" を追加します (このように):

.hide{
  display: none !important; 
 }


 <div id="dialog-confirm" class="hide" title="Delete This Image?">
于 2012-04-25T14:57:34.467 に答える