jquery ui对话框在按钮和内容div上使用相同的类打开多个对话框

Mic*_*oni 5 jquery user-interface dialog multiple-instances

我想通过在按钮和内容div上使用相同的类来打开多个对话框.以下工作但仅限第一次.

jQuery('.helpDialog').hide();

jQuery('.helpButton').click(function() {  
    jQuery(this).next('.helpDialog').dialog({  
    autoOpen: true,  
    title: 'Help',  
    width: 500,  
    height: 300,  
    position: [180,10],  
    draggable: true,    
    resizable: false,  
    modal: false  
    });  
return false;  
});  
Run Code Online (Sandbox Code Playgroud)

我们知道这个http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/的原因, 第二个调用被忽略,因为对话框已经被实例化了那个元素."

但是,当我通过尝试下面的代码解决该问题时,对话框不再打开.有人可以帮忙吗?提前致谢

jQuery('.helpDialog').hide();

jQuery(function() {  
    jQuery('.helpDialog').dialog({  
        autoOpen: false,  
        modal: true,  
        title: 'Info',  
        width: 600,  
        height: 400,  
        position: [200,0],  
        draggable: false  
    });  
});  

jQuery('.helpButton').click(function() {  
    jQuery(this).next('.helpDialog').dialog('open');  
    return false;  
});  
Run Code Online (Sandbox Code Playgroud)

Nic*_*ver 21

你实际上需要一种不同的方法,一种非直观的方法,如下所示:

jQuery(function($) {
  $('.helpButton').each(function() {  
    $.data(this, 'dialog', 
      $(this).next('.helpDialog').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;  
  });  
});  
Run Code Online (Sandbox Code Playgroud)

你可以在这里测试一下.

你为什么要这样做?因为.dialog()它将包含在对话框元素中的内容移动到结尾<body>,所以.next()将不再找到它...通过使用jQuery.data()我们维护对我们想要打开的对话框的引用.