简单的模态 JSON Jquery答案

【问题标题】：Simple modal JSON Jquery简单的模态 JSON Jquery
【发布时间】：2017-09-18 05:14:48
【问题描述】：

我希望我的内容在 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/

【问题讨论】：

你坚持哪一部分？ JSON？
基本上让它工作，Javascript部分，不太清楚如何让它的ID是动态的
您的 JSON 文件包含一个对象，该对象的字段为 mycontent，其值为对象数组，其中一个对象的字段为 content，另外两个对象的字段为 entry。这是非常异质的，因为您的链接看起来非常同质。首先，我会重新构建您的 JSON 以匹配您的链接，或者重新构建您的链接以匹配 JSON。

标签： javascript jquery html json simplemodal

【解决方案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;
});

【讨论】：