jQuery 모달 확인 온로드 오픈

나는 누군가가 나를 도울 수 있는지 궁금해.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

는 CSS에 (이 같은) 사업부 대화 상자로 클래스 "숨기기"를 추가해야합니다 :

.hide{ 
    display: none !important; 
} 


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

출처

2012-04-25 14:57:34

안녕하세요, 대체 솔루션으로 답장을 보내 주셔서 감사합니다. 나중에 사용하기 위해 이것을 보관하겠습니다. 종류는 안부 – IRHM

jQuery 모달 확인 온로드 오픈

답변

관련 문제