jquery ui對話框在按鈕和內容div上使用相同的類打開多個對話框

我想通過在按鈕和內容div上使用相同的類來打開多個對話框。下面的作品，但只有第一次。jquery ui對話框在按鈕和內容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; 
});

我們知道這個 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; 
});

來源

2010-12-23 MichaelAntoni

你實際上需要不同的方法在這裏，非直觀的一個，比如這個：

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

You can test it out here。

你爲什麼要這樣做？，因爲.dialog()將它在對話元素中包裝的內容移動到<body>的末尾，因此.next()將不再能夠找到它...通過使用jQuery.data()我們保留對我們想要打開的對話框的引用。

來源

2010-12-23 12:53:56

哇，這是如此之快，我已經得到了它啓動和運行感謝尼克。 – MichaelAntoni 2010-12-23 13:13:31

也許這段代碼會幫助你。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" /> 

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#opener1").click(function() { 
      $("<div id='dialog1' />").dialog(
      { 
       title: 'Basic modal dialog1', 
       autoOpen: false, 
       width: 600, 
       height: 400, 
       open: function (event, ui) { 
       } 
      }); 

      $("#dialog1").dialog('open').show(); 
      return false; 
     }); 


     $("#opener2").click(function() { 
      $("<div id='dialog2' />").dialog(
      { 
       title: 'Basic modal dialog2', 
       autoOpen: false, 
       width: 600, 
       height: 400, 
       open: function (event, ui) { 
       } 
      }); 

      $("#dialog2").dialog('open').show(); 
      return false; 
     }); 

    }); 
</script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <button id="opener1">open the dialog1</button> 
    <button id="opener2">open the dialog2</button> 

    </form> 
</body> 
</html>

來源

2014-07-02 14:48:29 Thomas

-1

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

來源

2016-08-16 06:11:13

jquery ui對話框在按鈕和內容div上使用相同的類打開多個對話框

回答

相關問題