シンプルなモーダルJSON Jquery

Question

自分のコンテンツをJSONファイルに入れて、モーダルウィンドウに動的に値を設定したいと思います。 毎回、対応するリンクをクリックするか、ID付きのdivにすることができます。その特定のコンテンツは、単純なモーダルダイアログウィンドウに自動的に表示されます。

JSONファイル

{ 
    "mycontent": [ 
     { 
      "content": "content 1" 
     }, { 
      "entry": "content 2" 
     } 
     , { 
      "entry": "content 3" 
     } 
    ] 
} 

Javascriptを

jQuery(function ($) { 
    $.getJSON('/json.json', function(data){ 

    // Load dialog on page load 
    //$('#basic-modal-content').modal(); 

    // Load dialog on click 
    $('#basic-modal .basic').click(function (e) { 
     $('#basic-modal-content').modal(); 

     return false; 
    }); 
}); 

HTML

<a href='#' class='basic'>content 1</a> 
<a href='#' class='basic'>content 2</a> 
<a href='#' class='basic'>content 3</a> 
<div id="basic-modal-content" style="display:none;"></div> 

私が使用しています：このコードでhttp://www.ericmmartin.com/projects/simplemodal-demos/

Answer 1

外観：

$('#basic-modal .basic').click(function (e) { 
    $.getJSON('/json.json', function(data){ 
     if(data != undefined && data.length > 0) 
     { 
      for(i=0; i < data.length; i++) 
      { 
       $('#DIV-ID').append(data.i.content... .... .. you code here...); 
      } 
      $('#basic-modal-content').modal(); 
     } 
    }); 
    return false; 
});