多个Jquery对话框

时间:2012-01-30 05:26:32

标签: jquery dialog

我是Web和Jquery的新手,我遇到了问题所以我搜索了web和stackoverflow以显示Multiple 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个&amp;当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>

这两个脚本都没有解决我的问题所以任何人都可以为我解决问题。

1 个答案:

答案 0 :(得分:0)

如果它正常工作,请在新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;
    });
});
});