여러 Jquery 대화 상자의

Question

웹 및 Jquery에 익숙하지 않아서 여러 jquery 대화 상자를 표시하기 위해 웹 및 stackoverflow를 검색 할 때 문제가 발생했습니다. 하지만 완벽한 답을 찾을 수 없어서 여기에 제 질문을 게시 할 생각이었습니다.

HTML 코드 위의 같은

<div class="Im_events"> 
<img SRC="Image/Thumb/Thumb-1.jpg" WIDTH="237" HEIGHT="237" ALT="Adventure and Thrill" /> 
<div class="event_text">Adventure &amp; Thrill</div>    
</div> 

JQuery와 버전 내 페이지에서 사용

<link rel="stylesheet" type="text/css" href="CSS/flick/jquery-ui-1.8.17.custom.css"> 
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JSS/jquery-1.7.1.min.js"></SCRIPT> 
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JSS/jquery-ui-1.8.17.custom.min.js"></SCRIPT> 

HTML 코드를 사용하여

임 나는 그들 (12)가 각각 &가 deferant 세부 사항이 포함되어있을 때 JQuery와에 사용자 clikc 대화 상자에 내용을 표시해야합니다.

는 그래서 하나가 나를 위해 솔루션을 제공 할 수 내 문제가 해결되지 않는

<script> 
$(document).click(function() { 
$("#Im_events").dialog("option","position",'center',"zIndex", 100); 
$("#Im_events").dialog({height: 850,width:1000, modal: true,show: "clip",hide: "explode"}); 



$("#Im_events").click(function() { 
      $("#Im_events").dialog("open"); 
      $("#Im_events2").dialog("close"); 

      return false; 
     }); 
    }); 

<script> 
jQuery(function($) { 
    $('.Im_events').each(function() { 
    $.data(this, 'dialog', 
     $(this).next('.event_text').dialog({ 
     autoOpen: false, 
     modal: true, 
     title: 'Info', 
     width: 600, 
     height: 400, 
     position: [200,0], 
     draggable: false 
     }) 
    ); 
    }).click(function() { 
     $.data(this, 'dialog').dialog('open'); 
     return false; 
    }); 
}); 
</SCRIPT> 

모두 스크립트를 사용했습니다.

Answer 1

작동하는 경우 대화 상자를 새 DIV로 엽니 다. 이 코드처럼

$(document).ready(function() { 
$('.Im_events').each(function() { 
    var $dialog = $('<div></div>'); 
    var $link = $(this).one('click', function() { 
     $dialog 
      .load($link.attr('href')) 
      .dialog({ 
       title: $link.attr('title'), 
       width: 500, 
       height: 300 
      }); 

     $link.click(function() { 
      $dialog.dialog('open'); 

      return false; 
     }); 

     return false; 
    }); 
}); 
});