多个 Jquery 对话框

Question

我是 web 和 Jquery 的新手，我遇到了问题，所以我搜索了 web 和 stackoverflow 以显示多个 jquery 对话框。但是我找不到完美的答案，所以我想在这里发布我的问题。

我用的是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 代码

<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>

像上面的 html 代码一样，我有 12 个，并且当用户在 jquery 对话框上单击应该显示 .

我尝试使用

<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;
    });
});
});